贝塞尔曲线的应用(二)

综合技术 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:简书阅读原文】。感谢您的支持!

您可能感兴趣的

如何在你的Kotlin代码中移除所有的!!(非空断言)... 翻译说明: 原标题: How to remove all !! from your Kotlin code 原文地址: android.jlel...
学习Broadcast组件 Broadcast是Android四大组件之一,中文翻译是广播.顾名思义,使用它需要广播发出者和监听者. 发出广播很简单,只要在Activi...
Android计步模块优化(今日步数) 最近在项目中研究计步模块,主要功能记录当天步数,类似微信运动,支付宝计步,咕咚今日步数。 开发之前的调研工作,搜遍baidu,google,github都...
在Android8.0上突破隐式广播的限制 Android O对隐式广播进行了限制, 其限制链接说明: https://developer.android.com/about/versions/oreo...
2017年适用于Android & iOS的最佳开源应用程序... 我们的移动设备,特别是我们的智能手机,已经成为我们的随身物品。 但是我们对待它并不会像对待自己的家那样保持警惕。 我们通常会仔细检查几乎所有进驻到家庭中的东西,...