贝塞尔曲线的应用(二)

综合技术 2018-05-21

购物车添加商品实现轨迹动画

先看下实现效果

device-2018-05-17-135829.gif

分析下实现原理,起始点是添加按钮,购物车是结束点,

我们把控制点的x坐标设定为结束点的x左边,y左边设定为添加按钮的y坐标,用贝塞尔的二阶曲线即可实现该效果。

1.确定view的位置坐标

image.png

getLocationInWindow是以B为原点的C的坐标

getLocationOnScreen是以A为原点的C的坐标

2.拿到关键点的坐标后我们需要提供关于坐标的估值器

实现TypeEvaluator的evaluate方法

这里提供了3个回调参数,它们分别代表:

float fraction:动画的完成程度,0~1

T startValue:动画开始值

T endValue: 动画结束值(这里而外补充一点,要想得到当前的动画值其实也很简单,只需要用(动画开始值+动画完成程度*动画结束值))

在自己的估值器中用二阶贝塞尔函数实现相应的坐标转换

image.png

public class PointEvaluate implements TypeEvaluator {
    private PointF controllerValue;


    public PointEvaluate(PointF controllerValue) {
        this.controllerValue = controllerValue;
    }

    @Override
    public PointF evaluate(float fraction, PointF startValue, PointF endValue) {
        float x = (1 - fraction) * (1 - fraction) * startValue.x + 2 * (1 - fraction) * fraction * controllerValue.x + fraction * fraction * endValue.x;
        float y = (1 - fraction) * (1 - fraction) * startValue.y + 2 * (1 - fraction) * fraction * controllerValue.y + fraction * fraction * endValue.y;
        return new PointF(x, y);
    }
}

3.我们可以在点击添加按钮的时候new一个imageView,让他的动画是从无到有(sacle,alpha动画),最后在运动轨迹变化的回调时不断变化imagview的位置.

public class ShopActivity extends AppCompatActivity {
    private ImageView ivCar, ivRemove, ivAdd;
    private int[] addView = new int[2];
    private int[] shopView = new int[2];
    private int[] parentView = new int[2];
    private RelativeLayout rlMain;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_shop);
        ivCar = findViewById(R.id.ivCar);
        rlMain = findViewById(R.id.rlMain);
        ivRemove = findViewById(R.id.ivRemove);
        ivAdd = findViewById(R.id.ivAdd);

        
        ivAdd.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                ivAdd.getLocationInWindow(addView);
                rlMain.getLocationInWindow(parentView);
                ivCar.getLocationInWindow(shopView);

                final PointF startF = new PointF(addView[0] - parentView[0], addView[1] - parentView[1]);
                final PointF endF = new PointF(shopView[0] - parentView[0], shopView[1] - parentView[1]);
                final PointF controllerF = new PointF(endF.x, startF.y);
                final ImageView imageView = new ImageView(ShopActivity.this);
                imageView.setImageResource(R.mipmap.ic_car);
                imageView.setScaleX(0);
                imageView.setScaleY(0);
                rlMain.addView(imageView);
                imageView.setX(startF.x);
                imageView.setY(startF.y);

                ValueAnimator valueAnimator = ValueAnimator.ofObject(new PointEvaluate(controllerF), startF, endF);
                valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                    @Override
                    public void onAnimationUpdate(ValueAnimator animation) {
                        PointF pointF = (PointF) animation.getAnimatedValue();
                        imageView.setX(pointF.x);
                        imageView.setY(pointF.y);
                        imageView.setScaleY(animation.getAnimatedFraction());
                        imageView.setScaleX(animation.getAnimatedFraction());
                    }
                });
                valueAnimator.setDuration(1000);
                valueAnimator.setTarget(imageView);
                valueAnimator.start();

            }
        });
    }
}

这样就可以实现贝塞尔的二阶运动轨迹了。

您可能感兴趣的

百度开源移动端深度学习框架MDL,可在苹果安卓系统自由切换... 雷锋网 (公众号:雷锋网) AI科技评论消息,日前,百度在 GitHub 上开源了移动端深度学习框架 mobile-deep-learning(MDL)的全部代码以及脚本,这项研究旨在让卷积神经网络(CNNC)能更简单和高速的部署在移动端,支持iOS GPU,目前已经在百度APP上有所使用。雷锋网...
Can not be supplied without an @Inject ... I am using Android Dagger2 but I am getting the error below. My AppModule class is: @Module public class AppModule { @Provides public Down...
Android模块化探索和实践(3):模块间彻底隔离... 在上一篇文章中 Android 模块化探索和实践(2):Dagger2实现模块化(组件化) 实现了模块间的Dagger2注入,但是细心的读者应该会发现,那个模块化方案其实是不彻底,因为没有做到模块之间的彻底隔离。比如在主APP中,需要手动在build.gradle中引入module,这样就无法做到...
基于Aop的 简单易用线程切换 基于Aop的 线程切换实现 转载请注明出处哦,谢谢! 先说说用法 假如你想指定一个方法在子线程运行,如下该方法在子线程运行 @NewThread void thread(){ //请求网络 } 假如...
Creating a custom SMS / MMS application in... Okay, here's where I'm at. I used Eclipse to import the code for the SMS/MMS app that is on Android devices. The code on GitHub is at https://gith...