贝塞尔曲线的应用(二)

综合技术 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();

            }
        });
    }
}

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

简书

责编内容by:简书阅读原文】。感谢您的支持!

您可能感兴趣的

Currency Curiosities Formatting currency values can be tricky because to do it correctly requires knowledge of each individual currency and ...
This Week in Programming: Vandwelling and the New ... I still remember the day everything changed. It was 2010, I was still pretty fresh to life with a smartphone. The rushin...
Is your Android Library, Lifecycle-Aware? Lifecycle events in Android. It has been a pain point for Android developers all over the world. It is no brainer...
Android去掉/混淆Log,反编译都看不到 出发点: 当然是由于编程习惯太好,打了一堆中文log,其实只是想给测试看。然而如果包被反编译,看log基本都能理解流程了,有点尴尬。所以此文主要探究proguard配置,以去除log。 以下过程示例,来自于这段代码。 publi...
Android 流畅度检测原理简析 android在不同的版本都会优化“UI的流畅性”问题,但是直到在android 4.1版本中做了有效的优化,这就是Project Butter。 Project Butter加入了三个核心元素:VSYNC、Triple Buff...