# Easing

Easing 模块实现了常见的动画缓动函数（动画效果参考 https://easings.net/ ），可从 wx.worklet 对象中读取。

# 示例代码

在开发者工具中预览效果

# 预置动画函数

• Easing.bounce 反弹动画
• Easing.ease 惯性动画
• Easing.elastic 弹性动画

# 标准缓动函数

• Easing.linear 线性
• Easing.quad 二次方
• Easing.cubic 三次方
• Easing.poly 实现其它幂函数

# 其它数学函数

• Easing.bezier 三次贝塞尔曲线
• Easing.circle 圆形曲线
• Easing.sin 正弦函数
• Easing.exp 指数函数

# 缓动方式

以上效果均有三种缓动方式

• Easing.in 正向执行缓动函数
• Easing.out 反向执行缓动函数
• Easing.inOut 前半程正向，后半程反向

以 sin 函数为例，其中 Easing.in(Easing.sin) 和直接使用 Easing.sin 效果相同。

1. Easing.in(Easing.sin) 动画效果参考 https://easings.net/#easeInSine
2. Easing.out(Easing.sin) 动画效果参考 https://easings.net/#easeOutSine
3. Easing.inOut(Easing.sin) 动画效果参考 https://easings.net/#easeInOutSine

# API

# linear

Easing.linear(t)

线性函数，f(t) = t

动画效果参考 http://cubic-bezier.com/#0,0,1,1

# quad

Easing.quad(t)

二次方函数，f(t) = t * t

动画效果参考 https://easings.net/#easeInQuad

# cubic

Easing.cubic(t)

立方函数，f(t) = t * t * t

动画效果参考 https://easings.net/#easeInCubic

# poly

Easing.poly(n)

高阶函数，返回幂函数

• poly(4): 动画效果参考 https://easings.net/#easeInQuart
• poly(5): 动画效果参考 https://easings.net/#easeInQuint

# bezier

Easing.cubicBezier(x1, y1, x2, y2)

三次贝塞尔曲线，效果同 css transition-timing-function

调试参数可借助可视化工具 http://cubic-bezier.com/

# circle

Easing.circle(t)

圆形曲线

动画效果参考 https://easings.net/#easeInCirc

# sin

Easing.sin(t)

正弦函数

动画效果参考 https://easings.net/#easeInSine

# exp

Easing.exp(t)

指数函数

动画效果参考 https://easings.net/#easeInExpo

# bounce

Easing.bounce(t)

简单的反弹效果

动画效果参考 https://easings.net/#easeInBounce

# ease

Easing.ease(t)

简单的惯性动画

动画效果参考 http://cubic-bezier.com/#.42,0,1,1

# elastic

Easing.elastic(bounciness = 1)

简单的弹性动画，类似弹簧来回摆动，高阶函数。

默认弹性为 1，会稍微超出一次。弹性为 0 时 不会过冲。

动画效果参考 https://easings.net/#easeInElastic

# in

Easing.in(easing)

正向运行 easing function，高阶函数。

# out

Easing.out(easing)

反向运行 easing function，高阶函数。

# inOut

Easing.inOut(easing)

前半程正向，后半程反向，高阶函数。