一、需求描述

动感影集一边播放，一边穿插着其他动画特效，读者可前往QQ，点击左上角的头像打开个人菜单页，选择菜单项的我的相册，打开相册页面，点击相册页右上角的工具箱按钮，其中就有动感影集，进行效果测试

二、功能分析

动感影集的目的是使用动画技术呈现前后照片的动态切换效果，用到的动画必须承上启下，而且要求具备一定的视觉美感。效果包括以下几种

淡入淡出动画

灰度动画

平移动画

缩放动画

旋转动画

裁剪动画

集合动画

属性动画组合

其余动画如百叶窗马赛克等等

除了以上列举的动画技术，还需要考虑前后动画之间的无缝衔接，像补间动画可通过监听器AnimationListener侦听到播放完成事件，属性动画也是如此。但是对于淡入淡出动画而言，它属于图形类型，并非动画类型。因此无法通过动画事件的侦听来判断是否已经播放完成，只能利用处理器固定延迟一段时间开启下一个动画任务

动感影集的实现步骤主要包含以下三个步骤

1：编写动感影集刚开始的初始化代码

2：编写各种动画效果之间的承上启下衔接代码

3：编写动感影集末尾的集合动画代码

三、效果演示

演示视频如下点击运行按钮后便会自动播放

动感影集

四、代码

Java类

package com.example.animation;

import com.example.animation.widget.MosaicView;
import com.example.animation.widget.ShutterView;

import android.animation.Animator;
import android.animation.RectEvaluator;
import android.animation.Animator.AnimatorListener;
import android.animation.ObjectAnimator;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.PorterDuff;
import android.graphics.Rect;
impo

import androidx.appcompat.app.AppCompatActivity;

import android.os.Looper;
import android.view.ViewGroup.LayoutParams;
import android.view.WindowManager;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.view.animation.AnimationSet;
import android.view.animation.RotateAnimation;
import android.view.animation.ScaleAnimation;
import android.view.animation.Animation.AnimationListener;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;
import android.widget.ImageView.ScaleType;
import android.widget.RelativeLayout;
import android.widget.TextView;

public class YingjiActivity extends AppCompatActivity implements AnimatorListener, AnimationListener {
    private RelativeLayout rl_yingji; // 声明一个相对布局对象
    private TextView tv_anim_title; // 声明一个文本视图对象
    private ImageView view1, view4, view5, view6; // 分别声明四个图像视图对象
    private ShutterView view2; // 声明一个百叶窗视图对象
    private MosaicView view3; // 声明一个马赛克视图对象
    // 定义一个用于播放动感影集的风景照片资源数组
    private int[] mImageArray = {
            R.drawable.bj01, R.drawable.bj02, R.drawable.bj03, R.drawable.bj04, R.drawable.bj05,
            R.drawable.bj06, R.drawable.bj07, R.drawable.bj08, R.drawable.bj09, R.drawable.bj10
    };
    private ObjectAnimator anim1, anim2, anim3, anim4; // 分别声明四个属性动画对象
    private Animation translateAnim, setAnim; // 分别声明两个补间动画对象
    private int mDuration = 5000; // 每个动画的播放时长

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_yingji);
        getWindow().addFlags(WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON); // 保持屏幕常亮
        findViewById(R.id.iv_back).setOnClickListener(v -> finish());
        TextView tv_title = findViewById(R.id.tv_title);
        tv_title.setText("动感影集");
        rl_yingji = findViewById(R.id.rl_yingji);
        tv_anim_title = findViewById(R.id.tv_anim_title);
        playYingji(); // 开始播放动感影集
    }

    // 开始
view1); // 往相对布局添加一个图像视图
        // 构造一个在灰度上变化的属性动画
        anim1 = ObjectAnimator.ofFloat(view1, "alpha", 0f, 1f);
        anim1.setDuration(mDuration); // 设置动画的播放时长
        anim1.addListener(this); // 给属性动画添加动画事件监听器
        anim1.start(); // 属性动画开始播放
    }

    private ImageView getImageView(LayoutParams params, int imageId) {
        ImageView iv = new ImageView(this);
        iv.setLayoutParams(params);
        iv.setImageResource(imageId);
        iv.setScaleType(ScaleType.FIT_START);
        return iv;
    }

    // 初始化各视图
    private void initView() {
        LayoutParams params = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
        view1 = getImageView(params, mImageArray[0]);
        view1.setAlpha(0f); // 设置视图的灰度
        // 创建一个百叶窗视图
        view2 = new ShutterView(this);
        view2.setLayoutParams(params);
        view2.setImageBitmap(BitmapFactory.decodeResource(getResources(), mImageArray[1]));
        view2.setMode(PorterDuff.Mode.DST_OUT); // 设置百叶窗视图的绘图模式
        // 创建一个马赛克视图
        view3 = new MosaicView(this);
        view3.setLayoutParams(params);
        view3.setImageBitmap(BitmapFactory.decodeResource(getResources(), mImageArray[2]));
        view3.setMode(PorterDuff.Mode.DST_OUT); // 设置马赛克视图的绘图模式
        view3.setRatio(-5);
        view4 = getImageView(params, mImageArray[3]);
        view5 = getImageView(params, mImageArray[5]);
        view6 = getImageView(params, mImageArray[6]);
    }

    // 在属性动画开始播放时触发
    @Override
    public void onAnimationStart(Animator animation) {
        if (animation.equals(anim1)) {
            tv_anim_title.setText("正在播放灰度动画");
        } else if (animation.equals(anim2)) {
            tv_anim_title.setText("正在播放裁剪动画");
        } else if (animation.equals(anim3)) {
            tv_anim_title.setText("正在播放百叶窗动画");
        } else if (animation.equals(anim4)) {
            tv_anim_title.setText("正在播放马赛克动画");
        }
    }

    // 在属性动画结束播放时触发
    @Override
    public void onAnimationEnd(Animator animation) {
        if (animation.equals(anim1)) { // 灰度动画之后准备播放裁剪动画
            rl_yingji.addView(view2, 0);
            // 从指定资源编号的图片文件中获取位图对象
            Bitmap bitmap = BitmapFactory.decodeResource(getResources(), mImageArray[0]);
            int width = view1.getWidth();
            int height = bitmap.getHeight() * width / bitmap.getWidth();
            // 构造一个从四周向中间裁剪的属性动画
            anim2 = ObjectAnimator.ofObject(view1, "clipBounds",
                    new RectEvaluator(), new Rect(0, 0, width, height),
                    new Rect(width / 2, height / 2, width / 2, height / 2));
            anim2.setDuration(mDuration); // 设置动画的播放时长
            anim2.addListener(this); // 给属性动画添加动画事件监听器
            anim2.start(); // 属性动画开始播放
        } else if (animation.equals(anim2)) { // 裁剪动画之后准备播放百叶窗动画
            rl_yingji.removeView(view1);
            rl_yingji.addView(view3, 0);
            // 构造一个按比率逐步展开的属性动画
            anim3 = ObjectAnimator.ofInt(view2, "ratio", 0, 100);
            anim3.setDuration(mDuration); // 设置动画的播放时长
            anim3.addListener(this); // 给属性动画添加动画事件监听器
            anim3.start(); // 属性动画开始播放
        } else if (animation.equals(anim3)) { // 百叶窗动画之后准备播放马赛克动画
            rl_yingji.removeView(view2);
            rl_yingji.addView(view4, 0);
            int offset = 5;
            view3.setOffset(offset); // 设置偏差比例
            // 构造一个按比率逐步展开的属性动画
            anim4 = ObjectAnimator.ofInt(view3, "ratio", 0 - offset, 101 + offset);
            anim4.setDuration(mDuration); // 设置动画的播放时长
            anim4.addListener(this); // 给属性动画添加动画事件监听器
            anim4.start(); // 属性动画开始播放
        } else if (animation.equals(anim4)) { // 马赛克动画之后准备播放淡入淡出动画
            rl_yingji.removeView(view3);
            // 淡入淡出动画需要先定义一个图形资源数组，用于变换图片
            Drawable[] drawableArray = {getDrawable(mImageArray[3]), getDrawable(mImageArray[4])};
            // 创建一个用于淡入淡出动画的过渡图形
            TransitionDrawable td_fade = new TransitionDrawable(drawableArray);
            td_fade.setCrossFadeEnabled(true); // 是否启用交叉淡入
            view4.setImageDrawable(td_fade); // 设置过渡图形
            td_fade.startTransition(mDuration); // 开始过渡转换
            tv_anim_title.setText("正在播放淡入淡出动画");
            // 延迟若干秒后启动平移动画的播放任务。平移动画跟在淡入淡出动画后面
            new Handler(Looper.myLooper()).postDelayed(() -> {
                rl_yingji.addView(view5, 0);
                // 创建一个平移动画
                translateAnim = new TranslateAnimation(0f, -view4.getWidth(), 0f, 0f);
                translateAnim.setDuration(mDuration); // 设置动画的播放时长
                translateAnim.setFillAfter(true); // 设置维持结束画面
                view4.startAnimation(translateAnim); // 平移动画开始播放
                translateAnim.setAnimationListener(this); // 给平移动画设置动画事件监听器
            }, mDuration);
        }
    }

    // 开始播放集合动画
    private void startSetAnim() {
        // 创建一个灰度动画
        Animation alpha = new AlphaAnimation(1.0f, 0.1f);
        alpha.setDuration(mDuration); // 设置动画的播放时长
        alpha.setFillAfter(true); // 设置维持结束画面
        // 创建一个平移动画
        Animation translate = new TranslateAnimation(1.0f, -200f, 1.0f, 1.0f);
        translate.setDuration(mDuration); // 设置动画的播放时长
        translate.setFillAfter(true); // 设置维持结束画面
        // 创建一个缩放动画
        Animation scale = new ScaleAnimation(1.0f, 1.0f, 1.0f, 0.5f);
        scale.setDuration(mDuration); // 设置动画的播放时长
        scale.setFillAfter(true); // 设置维持结束画面
        // 创建一个旋转动画
        Animation rotate = new RotateAnimation(0f, 360f, Animation.RELATIVE_TO_SELF,
                0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
        rotate.setDuration(mDuration); // 设置动画的播放时长
        rotate.setFillAfter(true); // 设置维持结束画面
        // 创建一个集合动画
        setAnim = new AnimationSet(true);
        ((AnimationSet) setAnim).addAnimation(alpha); // 给集合动画添加灰度动画
        ((AnimationSet) setAnim).addAnimation(translate); // 给集合动画添加平移动画
        ((AnimationSet) setAnim).addAnimation(scale); // 给集合动画添加缩放动画
        ((AnimationSet) setAnim).addAnimation(rotate); // 给集合动画添加旋转动画
        setAnim.setFillAfter(true); // 设置维持结束画面
        view5.startAnimation(setAnim); // 集合动画开始播放
        setAnim.setAnimationListener(this); // 给集合动画设置动画事件监听器
    }

    // 在属性动画取消播放时触发
    @Override
    public void onAnimationCancel(Animator animation) {}

    // 在属性动画重复播放时触发
    @Override
    public void onAnimationRepeat(Animator animation) {}

    // 在补间动画开始播放时触发
    @Override
    public void onAnimationStart(Animation animation) {
        if (animation.equals(translateAnim)) {
            tv_anim_title.setText("正在播放平移动画");
        } else if (animation.equals(setAnim)) {
            tv_anim_title.setText("正在播放集合动画");
        }
    }

    // 在补间动画结束播放时触发
    @Override
    public void onAnimationEnd(Animation animation) {
        if (animation.equals(translateAnim)) {
            rl_yingji.removeView(view4);
            rl_yingji.addView(view6, 0);
            startSetAnim(); // 开始播放集合动画
        } else if (animation.equals(setAnim)) {
            rl_yingji.removeView(view5);
            tv_anim_title.setText("动感影集播放结束，谢谢观看");
            view6.setOnClickListener(v -> playYingji());
        }
    }

    // 在补间动画重复播放时触发
    @Override
    public void onAnimationRepeat(Animation animation) {}

}

XML文件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <include layout="@layout/title_yingji" />

    <TextView
        android:id="@+id/tv_anim_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="5dp"
        android:gravity="center"
        android:textColor="@color/black"
        android:textSize="17sp" />

    <RelativeLayout
        android:id="@+id/rl_yingji"
        android:layout_width="match_parent"
        android:layout_height="400dp"
        android:background="@color/white" />

</LinearLayout>

创作不易觉得有帮助请点赞关注收藏~~~