动画的组合

发布时间:2017-7-9 7:13:29编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"动画的组合 ",主要涉及到动画的组合 方面的内容,对于动画的组合 感兴趣的同学可以参考一下。

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

  

布局:

 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     <ImageView10         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     <ImageView17         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     <TextView25         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     <scale10         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     <alpha17         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             @Override16             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     }

  


上一篇:Centos7.3安装vsftp服务
下一篇:JavaSE中Collection集合框架学习笔记(1)——具有索引的List

相关文章

关键词: 动画的组合

相关评论

本站评论功能暂时取消,后续此功能例行通知。

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

好贷网好贷款