Easing
该Easing
模块实现通用缓动功能。Animate.timing()使用此模块传达动画中物理上可信的动作。
你可以在http://easings.net/上找到一些常用缓动函数的可视化。
预定义的动画
该Easing
模块通过以下方法提供了几个预定义的动画:
back
提供了一个简单的动画,在向前移动之前对象略微回退
bounce
提供了一个弹跳动画
ease
提供了一个简单的惯性动画
elastic
提供简单的弹簧交互
标准功能
提供了三种标准缓动功能:
linear
quad
cubic
该poly
功能可用于实现四次,五次和其他更高功率的功能。
附加功能
附加的数学函数由以下方法提供:
bezier
提供三次贝塞尔曲线
circle
提供循环功能
sin
提供正弦函数
exp
提供指数函数
以下帮助程序用于修改其他缓动功能。
in
运行缓动功能
inOut
使任何缓动功能对称
out
向后运行缓动功能
方法
static step0(n)
一个步进函数,返回1的任何正值n
。
static step1(n)
步进功能,如果n
大于或等于1则返回1。
static linear(t)
线性函数,f(t) = t
。位置与经过时间一一对应。
static ease(t)
一种简单的惯性相互作用,类似于一个物体慢慢加速到速度。
static quad(t)
二次函数,f(t) = t * t
。位置等于经过时间的平方。
static cubic(t)
一个三次函数,f(t) = t * t * t
。位置等于经过时间的立方。
static poly(n)
功能函数。位置等于经过时间的N次方。
static sin(t)
正弦函数。
static circle(t)
循环功能。
static exp(t)
指数函数。
static elastic(bounciness)
一个简单的弹性相互作用,类似于一个来回摆动的弹簧。
默认弹性是1,超过一次。0的跳动完全没有超调,而N> 1的跳动会超过N次。
沃尔夫勒姆情节:
- http://tiny.cc/elastic_b_1 (bounciness = 1, default)
- http://tiny.cc/elastic_b_3 (bounciness = 3)
static back(s)
与使用Animated.parallel()
创建该对象动画小幅作为动画开始一个简单的效果。
Wolfram剧情:
- http://tiny.cc/back_default (s = 1.70158, default)
static bounce(t)
提供简单的弹跳效果。
static bezier(x1, y1, x2, y2)
提供一个三次贝塞尔曲线,相当于CSS Transitions' transition-timing-function
。
一个有用的可视化三次贝塞尔曲线的工具可以在http://cubic-bezier.com/找到。
static in(easing)
向前运行缓动功能。
static out(easing)
向后运行缓动功能。
static inOut(easing)
使任何缓动功能对称。缓动功能将持续一半的持续时间,然后在剩余的持续时间后退。
本文档系腾讯云开发者社区成员共同维护,如有问题请联系 cloudcommunity@tencent.com