动画对于一款APP的重要性,我想不用多说,想必不是搞开发的也明白,虽说APP的简洁实用性很重要,但UE也是同等重要的。
下面分析下网易云音乐的启动动画,一张开启图片缩放的同时首页也进行缩放,不过首页初始化的scale可能是1.5,总是初始化放大,然后缩放至正常状态,造成一种视觉冲击的效果,如果无法感受到的话,还是下载一枚用用。其实这种效果如果用原生开发的话,很简单,Activity之间跳转的动画配置下就完事了,这里简单讲下如何用React Native来实现跨平台的效果。
Animated是一个动画库,用来创造流畅、强大、并且易于构建和维护的动画。
最简单的工作流程就是创建一个Animated.Value,把它绑定到组件的一个或多个样式属性上。然后可以通过动画驱动它,譬如Animated.timing,或者通过Animated.event把它关联到一个手势上,譬如拖动或者滑动操作。除了样式,Animated.value还可以绑定到props上,并且一样可以被插值。
用到的方法:
static timing(value: AnimatedValue | AnimatedValueXY, config: TimingAnimationConfig)
推动一个值按照一个过渡曲线而随时间变化。Easing模块定义了一大堆曲线