安卓Animation实现APP引导用户点击动画

首先声明本人也是学生目前是实习生，不是技术大牛，只是分享一下自己写过的小Demo，望大家指点，共同进步，谢谢。

第一次写博客不知道，从哪里入手，有点迷啊，我直接上代码和效果图了

效果图如下

首先我用到了约束布局，如果低版本的开发工具需要导入一个依赖（在Moudle：app）

compile 'com.android.support.constraint:constraint-layout:1.0.2'

再然后是布局最外面是一个约束布局 android.support.constraint.ConstraintLayout

然后就是两个ImageView

    <ImageView
        android:id="@+id/watch_record_ImageView_group"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:src="@mipmap/group"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        />

    <ImageView
        android:id="@+id/watch_record_ImageView_finger"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@mipmap/finger"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginLeft="100dp"
        android:layout_marginTop="70dp"/>

我们看下布局的效果图

手势和小白点都有了接下来就要开始写动画了

我们在res目录下创建一个anim文件目录再创建一个xml文件（文件名自取）然后写上两个动画效果一个透明度动画，一个缩小放大的动画，代码如下

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<!-- 透明度动画-->
    <alpha
        android:duration="1000"
        android:fromAlpha="1.0"
        android:toAlpha="0.1"/>


    <!--缩小放大的动画-->
    <scale
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:fromXScale="0.5"
        android:toXScale="1.4"
        android:fromYScale="0.5"
        android:toYScale="1.4"
        android:pivotX="50%"
        android:pivotY="50%"
        android:duration="1000"
        />
    <!--android:repeatCount="-1"-->
</set>

我在这里说下我理解的这些属性

android:duration="1000"  这个参数是动画的持续时间 默认为300  以毫秒为单位，想要动画效果快慢可改变次值

fromAlpha:透明度的起始值 toAlpha:透明度的结束值，我从1到0.1 就是让动画越来越淡

 fromXScale:水平缩放起始值：0
 toXScale:水平缩放结束值：1
 fromYScale:竖直方向起始值
 toYScale: 竖直方向结束值
 pivotX:缩放轴点X
 pivotY:缩放轴点Y

注：上面的动画只是小白点的动画，手势的动画我们将通过代码来实现

动画布局写完了我们开始写Activity的代码了

public class WatchRecordActivity extends AppCompatActivity {
    ImageView watch_record_ImageView_finger, watch_record_ImageView_group;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.watch_record);
//     找到图片ID  开始设置动画
        setViews();
    }

    private void setViews() {
        watch_record_ImageView_finger = (ImageView) findViewById(R.id.watch_record_ImageView_finger);
        watch_record_ImageView_group = (ImageView) findViewById(R.id.watch_record_ImageView_group);
//    调用小白点动画 小白点在第一次进行先动
        scaleAndAlphaAnimation();
    }

    //  旋转动画  启动动画
    private void RotateAnimation() {
//        设置旋转动画参数 第一个是起始角度（15）  第二个结束角度原点（0）
        RotateAnimation rotate = new RotateAnimation(15, 0,
                RotateAnimation.RELATIVE_TO_SELF, 0.5f,
                RotateAnimation.RELATIVE_TO_SELF, 0.5f);
//        设置动画完成时间  毫秒为单位
        rotate.setDuration(1500);
//        setRepeatCount为-1  是无限循环，因为这里要有先后顺序 所有不用
//        rotate.setRepeatCount(-1);
//        启动动画
        watch_record_ImageView_finger.startAnimation(rotate);
        rotate.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {

            }

            @Override
            public void onAnimationEnd(Animation animation) {
//                 监听手势动画结束后显示小白点，启动小白点动画
//                 相互循环调用，无限执行
                watch_record_ImageView_group.setVisibility(View.VISIBLE);
//                 调用小白点动画
                scaleAndAlphaAnimation();
            }

            @Override
            public void onAnimationRepeat(Animation animation) {

            }
        });
    }

    //    小白点动画（放大和透明度）
    private void scaleAndAlphaAnimation() {
//          因为小白点动画有两个动作 一个放大 一个透明度，所有把参数写在了XML文件里
//         文件名watch_record_gestures_animation  在res目录anim目录下
        Animation animation = AnimationUtils.loadAnimation(this, R.anim.watch_record_gestures_animation);
        animation.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {

            }

            @Override
            public void onAnimationEnd(Animation animation) {
//                在小白点动画结束的方法里监听，小白点动画结束调用手势动画开始执行
//                隐藏小白点
                watch_record_ImageView_group.setVisibility(View.INVISIBLE);
//                启动手势动画
                RotateAnimation();
            }

            @Override
            public void onAnimationRepeat(Animation animation) {

            }
        });
//         启动动画
        watch_record_ImageView_group.setAnimation(animation);

    }

}

好了一个简单的引导用户的点击动画就完成了，请大家多多关照，本人是新手上路。本文章为本人原创，博客ID 死在键盘上的程序猿（ZWX原创）

注：本Demo图片为公司资源，下载的源码里面没有图片，请另找图片，其他源码都有，请谅解

附上源码下载地址点击打开链接

安卓Animation实现APP引导用户点击动画

猜你喜欢