首页 > 代码库 > 动画的组合
动画的组合
在浏览网站或者应用时,会发现一些比较好看的动画。写这篇文章主要是记录下一个思想,炫酷的动画需要组合实现,时机和动画的配合。上个示例:
布局:
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="http://www.mamicode.com/@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="http://www.mamicode.com/@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 }
动画的组合
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。