动画的组合

Posted 2020-09-26 Spiderman L

在浏览网站或者应用时，会发现一些比较好看的动画。写这篇文章主要是记录下一个思想，炫酷的动画需要组合实现，时机和动画的配合。上个示例：

  

 

 

 

 

 

 

 

 

 

 

 

 

布局：

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3              xmlns:tools="http://schemas.android.com/tools"
 4              android:layout_width="match_parent"
 5              android:layout_height="match_parent"
 6              android:background="@color/material_blue_500"
 7              tools:context=".mvp.ui.activities.SplashActivity">
 8 
 9     <ImageView
10         android:id="@+id/logo_outer_iv"
11         android:layout_width="120dp"
12         android:layout_height="wrap_content"
13         android:layout_gravity="center"
14         android:src="@drawable/ic_launcher_outer"/>
15 
16     <ImageView
17         android:id="@+id/logo_inner_iv"
18         android:layout_width="120dp"
19         android:layout_height="wrap_content"
20         android:layout_gravity="center"
21         android:src="@drawable/ic_launcher_inner"
22         tools:alpha="1"/>
23 
24     <TextView
25         android:id="@+id/app_name_tv"
26         android:layout_width="wrap_content"
27         android:layout_height="wrap_content"
28         android:layout_gravity="center"
29         android:layout_marginTop="80dp"
30         android:alpha="0"
31         android:text="@string/app_name"
32         android:textColor="@color/white"
33         android:textSize="@dimen/medium"
34         tools:alpha="1"/>
35 </FrameLayout>

这个Splash呈现的动画分为三个部分，

   (1) NEW字样图 

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <set xmlns:android="http://schemas.android.com/apk/res/android"
 3      android:duration="1000"
 4      android:interpolator="@android:anim/accelerate_interpolator">
 5 
 6     <translate
 7         android:fromYDelta="-100%p"
 8         android:toYDelta="0%"/>
 9     <scale
10         android:fromXScale="0.0"
11         android:fromYScale="0.0"
12         android:pivotX="50%"
13         android:pivotY="50%"
14         android:toXScale="1.0"
15         android:toYScale="1.0"/>
16     <alpha
17         android:fromAlpha="0.5"
18         android:toAlpha="1"/>
19 
20 </set>

　调用：

1 Animation animation = AnimationUtils.loadAnimation(this, R.anim.anim_top_in);
2 mLogoInnerIv.startAnimation(animation);

    说明：

 1 pivotX 属性为动画相对于物件的X坐标的开始位置,可以设置为数字
 2 pivotY 属性为动画相对于物件的Y坐标的开始位置
 3 
 4 这里的pivotX和pivotY,可以设置为数字，百分比，或者百分比p，例如分别都把两个参数
 5 
 6 - 设置为50时，旋转点为View的左上角的原点在x方向和y方向加上50px的点。在Java代码里面设置这个参数的对应参数是Animation.ABSOLUTE。
 7 
 8 - 设置为50%时，旋转点为View的左上角的原点在x方向加上自身宽度50%和y方向自身高度50%的点。在Java代码里面设置这个参数的对应参数是Animation.RELATIVE_TO_SELF。
 9 
10 - 设置为50%p时，旋转点为View的左上角的原点在x方向加上父控件宽度50%和y方向父控件高度50%的点。在Java代码里面设置这个参数的对应参数是Animation.RELATIVE_TO_PARENT。

   (2) 绿色方块

   (3) AppName - 淡入

　　这个两个动画是使用了一个库来实现的，选择你想要的效果去组合实现：

1 compile \'com.nineoldandroids:library:2.4.0\'
2 compile \'com.daimajia.easing:library:1.0.1@aar\'
3 compile \'com.daimajia.androidanimations:library:1.1.3@aar\'

实现示例动画的完整代码：

 1 private void initAnimation() {
 2         startLogoInner1();
 3         startLogoOuterAndAppName();
 4     }
 5 
 6     private void startLogoInner1() {
 7         Animation animation = AnimationUtils.loadAnimation(this, R.anim.anim_top_in);
 8         mLogoInnerIv.startAnimation(animation);
 9     }
10 
11     private void startLogoOuterAndAppName() {
12         final ValueAnimator valueAnimator = ValueAnimator.ofFloat(0, 1);
13         valueAnimator.setDuration(1000);
14         valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
15             @Override
16             public void onAnimationUpdate(ValueAnimator animation) {
17                 float fraction = animation.getAnimatedFraction();
18                 KLog.d("fraction: " + fraction);
19                 if (fraction >= 0.8 && !isShowingRubberEffect) {
20                     isShowingRubberEffect = true;
21                     startLogoOuter();
22                     startShowAppName();
23                     finishActivity();
24                 } else if (fraction >= 0.95) {
25                     valueAnimator.cancel();
26                     startLogoInner2();
27                 }
28 
29             }
30         });
31         valueAnimator.start();
32     }
33 
34     private void startLogoOuter() {
35         YoYo.with(Techniques.RubberBand).duration(1000).playOn(mLogoOuterIv);
36     }
37 
38     private void startShowAppName() {
39         YoYo.with(Techniques.FadeIn).duration(1000).playOn(mAppNameTv);
40     }
41 
42     private void startLogoInner2() {
43         YoYo.with(Techniques.Bounce).duration(1000).playOn(mLogoInnerIv);
44     }