![Namecheap Takes Down Polyfill.io Service Following Supply Chain Attack](https://cdn.sanity.io/images/cgdhsj6q/production/6af25114feaaac7179b18127c83327568ff592d1-1024x1024.webp?w=800&fit=max&auto=format)
Security News
Namecheap Takes Down Polyfill.io Service Following Supply Chain Attack
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
@jiaminghi/transition
Advanced tools
Readme
我们可以使用三组数据去描述一段动画(动画起始状态、动画结束状态、缓动曲线),根据这三组数据我们可以计算出动画过程中每一帧动画的状态。这就是Transition所提供的功能,根据每一帧动画的状态,我们不断的进行重绘,动画就产生了。
$ npm install @jiaminghi/transition
import { transition, injectNewCurve } from '@jiaminghi/transition'
// do something
<!--调试版-->
<script src="https://unpkg.com/@jiaminghi/transition/dist/index.js"></script>
<!--压缩版-->
<script src="https://unpkg.com/@jiaminghi/transition/dist/index.min.js"></script>
<script>
const { transition, extendCurves, createAnimator } = window.transition
// do something
</script>
详细文档及示例请移步HomePage.
/**
* @description 基于缓动曲线及起止状态获取若干帧动画状态
* @param {EaseCurve} easeCurve 缓动曲线名或数据
* @param {T} startState 动画起始状态
* @param {T} endState 动画结束状态
* @param {Number} frameNum 动画过渡帧数
* @param {Boolean} deep 是否启用递归模式
* @return {T[]} 过渡帧数据
*/
type transition = <T>(
easeCurve: EaseCurve,
startState: T,
endState: T,
frameNum = 30,
deep = false
) => T[]
Transition 支持三种数据类型以描述动画状态.
import transition from '@jiaminghi/transition'
const start = 0
const end = 100
const frameNum = 10
const easeCurve = 'linear'
transition(easeCurve, start, end, frameNum)
/**
* [
* 0, 11.111111111111112, 22.222222222222225,
* 33.333333333333336, 44.44444444444445, 55.55555555555556,
* 66.66666666666667, 77.77777777777779, 88.8888888888889, 100
* ]
*/
import transition from '@jiaminghi/transition'
const start = [10, 20, 30]
const end = [100, 200, 300]
const frameNum = 3
const easeCurve = 'linear'
transition(easeCurve, start, end, frameNum)
/**
* [
* [10, 20, 30],
* [55, 110, 165],
* [100, 200, 300]
* ]
*/
import transition from '@jiaminghi/transition'
const start = { x: 0, y: 20 }
const end = { x: 100, y: 200 }
const frameNum = 3
const easeCurve = 'linear'
transition(easeCurve, start, end, frameNum)
/**
* [
* { x: 0, y: 20 },
* { x: 50, y: 110 },
* { x: 100, y: 200 }
* ]
*/
启用递归模式以计算Array
或Object
中的深层数据.
import transition from '@jiaminghi/transition'
const start = { x: 0, y: 20, radius: [10, 20, { z: 30 }] }
const end = { x: 100, y: 200, radius: [50, 90, { z: 10 }] }
const frameNum = 3
const easeCurve = 'linear'
const deep = true
transition(easeCurve, start, end, frameNum, deep)
/**
* [
* { x: 0, y: 20, radius: [10, 20, { z: 30 }] },
* { x: 50, y: 110, radius: [30, 55, { z: 20 }] },
* { x: 100, y: 200, radius: [50, 90, { z: 10 }] },
* ]
*/
Notice
如果你想扩展新的缓动曲线,你可以使用Transition
提供的extendCurves
方法去扩展。
import { extendCurves } from '@jiaminghi/transition'
const curveName = 'linear'
// 可以使用绘制工具获得
const bezierCurve = [[[0, 1]], [[1, 0]]]
extendCurves(curveName, bezierCurve)
FAQs
Dynamic effect plugin based Bezier Curve
The npm package @jiaminghi/transition receives a total of 2,742 weekly downloads. As such, @jiaminghi/transition popularity was classified as popular.
We found that @jiaminghi/transition demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.
Security News
A JavaScript library maintainer is under fire after merging a controversial PR to support legacy versions of Node.js.