首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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次。

沃尔夫勒姆情节:

static back(s)

与使用Animated.parallel()创建该对象动画小幅作为动画开始一个简单的效果。

Wolfram剧情:

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)

使任何缓动功能对称。缓动功能将持续一半的持续时间,然后在剩余的持续时间后退。

扫码关注腾讯云开发者

领取腾讯云代金券