每次吃饭点外卖的时候（暴露了自己是个死肥宅，手动滑稽），或者在淘宝购物的时候，将商品加入购物车时会有一个很炫酷的动画，如下图饿了么点餐动画：
所以百度了一下前端使用css实现这个效果，然后就自己就照葫芦画瓢的写了一个小小的demo，完全当作学习了一把。
在界面上，我是参考了图片上的界面，写的css，然后在美团上面扒的数据。完成后的界面如下图：
开始想着只是做一个简单的实现效果，界面上只有div框，按钮什么的这些，反正想着很丑的界面，但是自己看到饿了么这么好看的界面，自己就忍不住模仿着写了一下下。
主要用到的是移动端适配方案：flexible.js + rem的方案
首先获取到页面上所有按钮，然后给按钮添加点击事件，获取到点击当前按钮的位置坐标信息
方案一：使用定位+transition的方式实现
方案二：使用transform + transition的方式实现
其实还可以使用css的animate来实现，只不过由于需要动态计算目标位置的坐标，实现起来比较困难，所以我就没有写，如果目标位置的坐标值固定，那么可以通过animate改变top、left或者translateX、translateY的值来实现这个效果，垂直方向的动画使用贝塞尔曲线的 function-timing 。
初识CSS抛物线动画
https://github.com/HyFun/CSS-Sample-ElemeAnimate
使用TweenMax 的Physics2DPlugin插件即可实现。Physics2DPlugin是与TweenMax配套的进行物理动画的拓展插件，包括重力、速度、加速度、摩擦力动画等等。
Physics2DPlugin可在TweenMax中文网下载。
TweenMax.to("#obj", 0.5, {physics2D:{velocity:500, angle:300, gravity:500}})
1、首先描一个坐标轴2、确定方程式
3、打点
4、连线
5、取出打点的坐标，按照顺序依次变更颜色（做出运动效果）
6、简单的一元二次方程举例【步骤5留给题主思考】
public class View extends JFrame {
public View() {
JFrame frame = new JFrame("Equation")
frame.getContentPane().setLayout(new BorderLayout())
JPanel panel1 = new JPanel()
panel1.setPreferredSize(new Dimension(50, 50))
JLabel labelA = new JLabel()
labelA.setText("a")
JTextField textA = new JTextField("0",3)
JLabel labelB = new JLabel()
labelB.setText("b")
JTextField textB = new JTextField("0",3)
JLabel labelC = new JLabel()
labelC.setText("c")
JTextField textC = new JTextField("0",3)
JButton draw = new JButton()
draw.setText("Draw")
draw.addActionListener( new ActionListener(){
@Override
public void actionPerformed(ActionEvent e){
Controller.a = Double.parseDouble(textA.getText())
Controller.b = Double.parseDouble(textB.getText())
Controller.c = Double.parseDouble(textC.getText())
repaint()
frame.pack()
frame.setSize(420,490)
}
})
panel1.add(labelA)
panel1.add(textA)
panel1.add(labelB)
panel1.add(textB)
panel1.add(labelC)
panel1.add(textC)
panel1.add(draw)
JPanel panel2 = new JPanel(){
public void paint(Graphics g){
super.paint(g)
Controller.grid(g)
Controller.Graphic1(g)
}
}
panel2.setBackground(Color.WHITE)
frame.getContentPane().add(panel1, BorderLayout.PAGE_START)
frame.getContentPane().add(panel2, BorderLayout.CENTER)
frame.setVisible(true)
frame.setSize(420,490)
frame.setDefaultCloseOperation(EXIT_ON_CLOSE)
}
public static void main(String[] args) {
EventQueue.invokeLater(new Runnable() {
public void run() {
try {
View frame = new View()
} catch (Exception e) {
e.printStackTrace()
}
}
})
}
}
public class Controller {
static double a=2, b=1, c=0
public static void grid (Graphics g){
g.setColor(Color.blue)
g.drawLine(200,0,200,400)
g.drawLine(0,200,400,200)
for (int x=0x<=400x= x +40){
g.drawLine(x,195,x,205)
}
for (int y=0y<=400y=y+40){
g.drawLine(195,y,205,y)
}
}
public static void Graphic1(Graphics g) {
g.setColor(Color.red)
for (double x=-100x<=100x = x+0.1){
double y = a * x * x + b * x + c
int X = (int)Math.round(200 + x*20)
int Y = (int)Math.round(200 - y*20)
g.fillOval(X-2,Y-2,4,4)
}
}
}
