Android animation动画实现方式总结及开源方案搜集
程序员文章站
2024-03-24 10:46:34
...
Android animation动画实现方式总结及开源方案搜集
朋友推荐了一个开源的动画库Lottie,感动了有木有~/~,不禁想起面对一堆堆复杂动画需求时胸中的一幕幕万马奔腾,于是想着搜罗总结一下Android实现动画的方式:
-
Lottie开源动画库
看看官方给的一些实现效果:
心动了么,更心动的是,实现这些效果对开发来说最少只需要两步:
1.配置Gradle:
dependencies {
compile 'com.airbnb.android:lottie:2.0.0-beta4'
}
2.布局中使用控件:
<com.airbnb.lottie.LottieAnimationView
android:id="@+id/animation_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:lottie_fileName="hello-world.json"
app:lottie_loop="true"
app:lottie_autoPlay="true" />
其中app:lottie_fileName=”hello-world.json”,hello-world.json是设计师做出动画后导出的json数据,把它放在app/src/main/assets
这个开源库呢,简单的说就是根据这些json数据还原出设计师设计的动画,相比要用一张张图片来展现这些动画优势就很明显了,比较遗憾的是有些公司可能没有熟练掌握制作这些动画的设计人员,不过我相信这种方式将会被越来越多的设计师和开发人员接受
https://github.com/airbnb/lottie-android
-
Android内置动画之渐变动画
渐变动画指的是可以应用在imageview,textview之类的控件视图上,实现透明度的变化,移动,旋转和缩放效果
使用示例如下:
1.在res/anim/中定义动画
<set android:shareInterpolator="false">
<scale
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:fromXScale="1.0"
android:toXScale="1.4"
android:fromYScale="1.0"
android:toYScale="0.6"
android:pivotX="50%"
android:pivotY="50%"
android:fillAfter="false"
android:duration="700" />
<set android:interpolator="@android:anim/decelerate_interpolator">
<scale
android:fromXScale="1.4"
android:toXScale="0.0"
android:fromYScale="0.6"
android:toYScale="0.0"
android:pivotX="50%"
android:pivotY="50%"
android:startOffset="700"
android:duration="400"
android:fillBefore="false" />
<rotate
android:fromDegrees="0"
android:toDegrees="-45"
android:toYScale="0.0"
android:pivotX="50%"
android:pivotY="50%"
android:startOffset="700"
android:duration="400" />
</set>
</set>
2.将上面定义的动画在控件上应用:
ImageView spaceshipImage = (ImageView) findViewById(R.id.spaceshipImage);
Animation hyperspaceJumpAnimation = AnimationUtils.loadAnimation(this, R.anim.hyperspace_jump);
spaceshipImage.startAnimation(hyperspaceJumpAnimation);
-
Android内置动画之帧动画
帧动画是通过一张张图片,按照顺序显示出来,形成动画的效果,和放电影一样,使用过程也大致分两步走:
1.在res/drawable/中定义动画
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="true">
<item android:drawable="@drawable/rocket_thrust1" android:duration="200" />
<item android:drawable="@drawable/rocket_thrust2" android:duration="200" />
<item android:drawable="@drawable/rocket_thrust3" android:duration="200" />
</animation-list>
2.将上面定义的动画设为类似imageview控件的背景,或者在代码中使用:
AnimationDrawable rocketAnimation;
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
ImageView rocketImage = (ImageView) findViewById(R.id.rocket_image);
rocketImage.setBackgroundResource(R.drawable.rocket_thrust);
rocketAnimation = (AnimationDrawable) rocketImage.getBackground();
}
public boolean onTouchEvent(MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_DOWN) {
rocketAnimation.start();
return true;
}
return super.onTouchEvent(event);
}
-
Android内置动画之属性动画
属性动画是比较强大的,它可以让你定义在怎样的时间中以怎样的方式改变控件的属性,属性包括:
动画持续的时间
属性值改变与时间的函数关系
动画重复播放方式
一个控件上多个动画的编排
帧延迟等的安排
eg.将一个imageview以一定的加速度从屏幕的左边移到右边 -
Gif动画
大家都知道,android原生不支持gif动画,只能通过mediaplay来显示,且还常常不能正常显示出来,为此有了这个gifview,其用法和imageview一样
1.把GifView.jar加入项目
2.在xml中加入GifView控件,GifView继承自View类。如:
<com.ant.liao.GifView android:id="@+id/gif2"
android:layout_height="wrap_content" android:layout_width="wrap_content"
android:paddingTop="4px" android:paddingLeft="14px" android:enabled="false" />
3.在代码中配置常用属性:
// 从xml中得到GifView的句柄
gf1 = (GifView) findViewById(R.id.gif1);
// 设置Gif图片源
gf1.setGifImage(R.drawable.gif1);
// 添加监听器
gf1.setOnClickListener(this);
// 设置显示的大小,拉伸或者压缩
gf1.setShowDimension(300, 300);
// 设置加载方式:先加载后显示、边加载边显示、只显示第一帧再显示
gf1.setGifImageType(GifImageType.COVER);
https://code.google.com/archive/p/gifview/
-
Svg动画
svg是矢量图,和lottie原理上有异曲同工之妙,都是用数据来描述动画,然后通过提供的api来还原,不同的是lottie用的josn,svg是xml格式的,当然内容的组织方式和具体的使用方法是各异的
参考
https://github.com/MegatronKing/SVG-Android Facebook Keyframes
当然,从名字可以看出来这时facebook团队出的一个动画框架
https://github.com/facebookincubator/KeyframesCocos2d-x
如果你需要做一些有交互的,类似游戏的动画,恭喜你,并且同情你3秒钟,来学这个吧,这个就是做游戏用的,哈哈,我曾经就遇到过这个巨大的坑
http://www.cocos2d-x.org/