预览效果不好意思不会有iOS篇了,我不会。flutter的话看情况吧。
这种动画我想,如果用自己用Canvas去画要废点脑细胞了,如果用
lottie
则很简单了。
android github地址:https://github.com/airbnb/lottie-android
简单介绍一下lottie
:让设计师用AfterEffects
设计动画,然后导出为Json格式的文件,放到各个平台中后,再集成lottie
的sdk
渲染它!
- 设计师该怎么做?
- 安装插件
从官方文档https://github.com/airbnb/lottie-web里可以看到有6种方式。这里只说最简单的说说mac的方式。详细见上面这个网址:
$ brew tap danielbayley/adobe
$ brew cask install lottie
- 安装后
Windows:转到“编辑”>“首选项”>“脚本和表达式...”,然后选中“允许脚本编写文件和访问网络”
Mac:转到Adobe After Effects>首选项>脚本和表达式...>并选中“允许脚本编写文件和访问网络”
旧版本
Windows:转到“编辑”>“首选项”>“常规”>,然后选中“允许脚本编写文件和访问网络”
Mac:转到Adobe After Effects>首选项>常规>,然后选中“允许脚本编写文件和访问网络” - 安装HTML播放器
$ npm install lottie-web
$ bower install bodymovin
- 怎么设计?
视频详见(需要翻墙):https://www.youtube.com/watch?v=5XMUJdjI0L8
文字版:- 打开您的AE项目,然后在“窗口”>“扩展”>“ bodymovin”中选择bodymovin扩展名。
- 将打开一个面板,其中包含“成分”选项卡,其中列出了所有项目成分。
- 选择要导出的合成。
- 选择一个目标文件夹。
- 点击渲染
- 查找导出的json文件(如果动画上有图像或AI层,将有一个包含导出文件的图像文件夹)
- android开发者怎么做?
- 在
app
的gradle
里加入引用implementation 'com.airbnb.android:lottie:3.4.0'
- 下载这个https://github.com/airbnb/lottie-android/blob/master/LottieSample/src/main/assets/lottiefiles/deadpool.json
json,在res
里新建一个raw
目录,然后放到里面 - 在xml里贴上控件
- 在
<com.airbnb.lottie.LottieAnimationView
android:id="@+id/lottie_layer_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:lottie_loop="true"
app:lottie_autoPlay="true"
app:lottie_rawRes="@raw/deadpool" />
- 运行程序,搞定!
-
怎么在程序里控制它(kotlin版)?详细见官方文档:http://airbnb.io/lottie/#/android
- 播放/暂停/循环播放
去掉上面xml的app:lottie_autoPlay="true"
和app:lottie_loop="true"
,然后在代码里:
- 播放/暂停/循环播放
lottie_layer_name.playAnimation()
lottie_layer_name.pauseAnimation()
lottie_layer_name.repeatMode = LottieDrawable.RESTART
lottie_layer_name.repeatCount = ValueAnimator.INFINITE
- 动画的进度回调
lottie_layer_name.addAnimatorUpdateListener {
Log.d("tag",it.animatedValue.toString())
//it是一个ValueAnimator,更多方法和属性自己点进去看
}
- 怎么控制进度?
比如根据当前的一个动画进度来控制它的进度
val animator = ValueAnimator.ofFloat(0f, 1f)
animator.addUpdateListener { animation: ValueAnimator ->
lottie_layer_name.progress = animation.animatedValue.toString().toFloat()
}
animator.start()
- 怎么动态改变动画(局部)的属性(上面gif里的眼睛在绿色和白色之间变化)?
这个得分2步:
1.找到对应的KeyPath。
在界面上随便加一个按钮btn1
btn1.setOnClickListener {
lottie_layer_name.resolveKeyPath(KeyPath("**")).forEach {
Log.d("tag","KeyPath$it")
}
}
此时会打印出类似如下的log信息:
KeyPathKeyPath{keys=[note_big_02],resolved=true}
KeyPathKeyPath{keys=[note_big_02, note_big_02],resolved=true}
KeyPathKeyPath{keys=[note_big_02, note_big_02, Path],resolved=true}
……
KeyPathKeyPath{keys=[eye_left],resolved=true}
KeyPathKeyPath{keys=[eye_left, Group 1],resolved=true}
KeyPathKeyPath{keys=[eye_left, Group 1, Fill 1],resolved=true}
……
其中,eye_left
、Group 1
、Fill 1
就是图层关系与属性,在AfterEffects
里大概是这样的:
其实,最好的方式还是直接问设计师某个图层的名字和属性,上面我们自己来找只是在目前没有设计师的情况下。
2.写代码来改变属性
//左眼
lottie_layer_name.addValueCallback(
KeyPath("eye_left", "Group 1","Fill 1"),
LottieProperty.COLOR_FILTER,
{ frameInfo ->
if (frameInfo.overallProgress < 0.5) SimpleColorFilter(Color.GREEN) else SimpleColorFilter(
Color.WHITE
)
}
)
//右眼
lottie_layer_name.addValueCallback(
KeyPath("eye_right", "Group 1","Fill 1"),
LottieProperty.COLOR_FILTER,
{ frameInfo ->
if (frameInfo.overallProgress < 0.5) SimpleColorFilter(Color.GREEN) else SimpleColorFilter(
Color.WHITE
)
}
)
另外,除了上面这个属性,还有其他一些属性可以这么改,这里就不作赘述了。
附属性:
Transform:
TRANSFORM_ANCHOR_POINT
TRANSFORM_POSITION
TRANSFORM_OPACITY
TRANSFORM_SCALE
TRANSFORM_ROTATION
Fill:
-
COLOR
(non-gradient) OPACITY
COLOR_FILTER
Stroke:
COLOR (non-gradient)
STROKE_WIDTH
OPACITY
COLOR_FILTER
Ellipse:
POSITION
ELLIPSE_SIZE
Polystar:
POLYSTAR_POINTS
POLYSTAR_ROTATION
POSITION
POLYSTAR_OUTER_RADIUS
POLYSTAR_OUTER_ROUNDEDNESS
-
POLYSTAR_INNER_RADIUS
(star) -
POLYSTAR_INNER_ROUNDEDNESS
(star)
Repeater:
- All transform properties
REPEATER_COPIES
REPEATER_OFFSET
TRANSFORM_ROTATION
TRANSFORM_START_OPACITY
TRANSFORM_END_OPACITY
Layers:
- All transform properties
-
TIME_REMAP
(composition layers only)
更多还是详见官方文档吧。就先说到这里了。
网友评论