利用 Camera 和 Matrix 实现有趣的卡片效果

1,979 阅读4分钟

FlipCards

这篇文章主要讲解一个翻转切换内容的卡片效果,主要利用Camera和Matrix来实现,主要是为了加深对Camera和Matrix的理解,如果对Camera和Matrix不清楚地童鞋可以看我的上篇文章:Android中利用Camera与Matrix实现3D效果详解
好了,我们先看下效果吧 (效果的灵感来自:Dribbble):


FlipCards

项目github地址
欢迎star、fork。

实现思路:
一、主要应用Animation进行实现,创建一个继承自Animation的自定义动画,在applyTransformation()方法中进行逻辑判断。
二 、考虑到旋转180度后控件文字会是倒过来显示的,并且旋转360度后虽然文字正常显示了但效果不好,所以在applyTransformation方法中对角度进行动态的修改。
三、为了使外部可以在控件翻转过程中修改内容,在自定义的Animation中添加了监听接口,用于监听内容变化的时机。
四、外部控件调用startAnimation()方法即可使用。

具体实现

当然我们也可以用自定义控件的方式实现,但考虑到实现的复杂性和使用性,我没有选择。
知道了实现思路,那么我们开始着手开始吧:
第一步:自定义Animation,覆写initialize和applyTransformation方法

public class FlipCardAnimation extends Animation{
 @Override
    public void initialize(int width, int height, int parentWidth, int parentHeight) {

        super.initialize(width, height, parentWidth, parentHeight);
        mCamera = new Camera();
    }
    @Override
    protected void applyTransformation(float interpolatedTime, Transformation t) {

    }
}

在initialize方法中初始化Camera对象。

第二步:
在applyTransformation方法中实现逻辑:

  @Override
    protected void applyTransformation(float interpolatedTime, Transformation t) {

        final float fromDegrees = mFromDegrees;

        float degrees = fromDegrees + ((mToDegrees - fromDegrees) * interpolatedTime);

        final float centerX = mCenterX;

        final float centerY = mCenterY;

        final Camera camera = mCamera;

        final Matrix matrix = t.getMatrix();

        camera.save();

        if (degrees>90 || degrees<-90){
            if (!isContentChange){
                if(listener!=null){
                    listener.contentChange();
                }
                isContentChange = true;
            }

            if (degrees>0) {
                degrees = 270 + degrees - 90;
            }else if (degrees<0){
                degrees = -270+(degrees+90);
            }
        }

        camera.rotateX(degrees);

        camera.getMatrix(matrix);

        camera.restore();

        matrix.preTranslate(-centerX, -centerY);

        matrix.postTranslate(centerX, centerY);
    }

在这里需要注意的地方是,当卡片顺时针或者逆时针旋转的时候对角度进行判断,当旋转大于90度或者小于-90度时,将之后的角度调整为270度到360度或者-270度到-360度之间,以此来实现卡片内容正常显示,如果不做处理,我们翻转过后的文字是倒过来显示的。

第三步:设置内容变化监听,方便外部对卡片内容做修改

 private OnContentChangeListener listener;

    public void setOnContentChangeListener(OnContentChangeListener listener) {
        this.listener = listener;
    }

    public interface OnContentChangeListener{
        void contentChange();
    }

为了确保外部每次开启动画内容都会变动,务必在开始之前调用方法setCanContentChange():

animation.setCanContentChange();

如果设置循环动画,则要在监听中设置setCanContentChange()方法:

animation.setAnimationListener(new Animation.AnimationListener() {
                @Override
                public void onAnimationStart(Animation animation) {
                }
                @Override
                public void onAnimationEnd(Animation animation) {
                }
                @Override
                public void onAnimationRepeat(Animation animation) {
                    ((FlipCardAnimation)animation).setCanContentChange();
                }
            });

第四步:为控件设置并开启动画

这一步就比较简单了,都是常用的对Animation的设置:

animation = new FlipCardAnimation(0, degree, width, height);
            animation.setInterpolator(new AnticipateOvershootInterpolator());
            animation.setDuration(3000);
            animation.setFillAfter(false);
            animation.setRepeatCount(-1);//设置无限循环
            animation.setAnimationListener(new Animation.AnimationListener() {
                @Override
                public void onAnimationStart(Animation animation) {
                }
                @Override
                public void onAnimationEnd(Animation animation) {
                }
                @Override
                public void onAnimationRepeat(Animation animation) {
                    ((FlipCardAnimation)animation).setCanContentChange();//如果设置循环,务必在这里添加这行代码
                }
            });
            animation.setOnContentChangeListener(new FlipCardAnimation.OnContentChangeListener() {
                @Override
                public void contentChange() {
                    if (iv_pro == null) {
                        return;
                    }
                    iv_pro.setBackgroundResource(DRAWABLE[num]);
                    tv_item.setText("¥" + new Random().nextInt(500));
                    tv_price_item.setText("Discount");
                }
            });
            llyt_item.startAnimation(animation);

到此,其实我们的翻转卡片效果就已经差不多完成了。在设置Animation的时候有setInterpolator()这个方法,interpolator插补器可以用来设置动画运动时的速率,插补器的原理就是通过改变实际执行动画的时间点,提前/延迟执行默认的时间点来达到加速/减速的效果。这里再多说下Interpolator的几个子类,也是为了自己以后记忆和查找,大家可以设置不同的插补器看下效果。

AccelerateDecelerateInterpolator 在动画开始与介绍的地方速率改变比较慢,在中间的时侯加速
AccelerateInterpolator 在动画开始的地方速率改变比较慢,然后开始加速
CycleInterpolator 动画循环播放特定的次数,速率改变沿着正弦曲线
DecelerateInterpolator 动画开始的地方快然后慢
LinearInterpolator 在动画的以均匀的速率改变
AnticipateInterpolator 向前插补器,开始的时候向后然后向前甩
AnticipateOvershootInterpolator 向前向后插补器,开始的时候向后然后向前甩,结束时向前甩一定值后再返回最后的值
OvershootInterpolator 超出插补器,结束时向前甩一定值后再回到原来位置
BounceInterpolator 动画结束的时候弹起

项目github地址:github.com/zhangke3016…】如果觉得有趣欢迎star、fork。