BranchesTags

Repository files navigation

ENGLISH

Transition

Travis CILICENSENPM

Transition 是什么?

  • 它是一个基于贝塞尔曲线的动效插件。
  • 它提供常用的缓动曲线。
  • 支持自定义缓动曲线。

动画是如何产生的?

  • 获取一帧动画数据
  • 根据动画数据渲染图像
  • 重复...

我们可以使用三组数据去描述一段动画（动画起始状态、动画结束状态、缓动曲线），根据这三组数据我们可以计算出动画过程中每一帧动画的状态。这就是**Transition**所提供的功能，根据每一帧动画的状态，我们不断的进行重绘，动画就产生了。

npm 安装

$ npm install @jiaminghi/transition

使用

import{transition,injectNewCurve}from'@jiaminghi/transition'// do something

快速体验

<!--调试版--><scriptsrc="https://unpkg.com/@jiaminghi/transition/dist/index.js"></script><!--压缩版--><scriptsrc="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[]} 过渡帧数据 */typetransition=<T>(easeCurve: EaseCurve,startState: T,endState: T,frameNum=30,deep=false)=>T[]

示例

Transition 支持三种数据类型以描述动画状态.

Number

importtransitionfrom'@jiaminghi/transition'conststart=0constend=100constframeNum=10consteaseCurve='linear'transition(easeCurve,start,end,frameNum)/** * [ * 0, 11.111111111111112, 22.222222222222225, * 33.333333333333336, 44.44444444444445, 55.55555555555556, * 66.66666666666667, 77.77777777777779, 88.8888888888889, 100 * ] */

Array

importtransitionfrom'@jiaminghi/transition'conststart=[10,20,30]constend=[100,200,300]constframeNum=3consteaseCurve='linear'transition(easeCurve,start,end,frameNum)/** * [ * [10, 20, 30], * [55, 110, 165], * [100, 200, 300] * ] */

Object

importtransitionfrom'@jiaminghi/transition'conststart={x: 0,y: 20}constend={x: 100,y: 200}constframeNum=3consteaseCurve='linear'transition(easeCurve,start,end,frameNum)/** * [ * { x: 0, y: 20 }, * { x: 50, y: 110 }, * { x: 100, y: 200 } * ] */

Deep

启用递归模式以计算Array或Object中的深层数据.

importtransitionfrom'@jiaminghi/transition'conststart={x: 0,y: 20,radius: [10,20,{z: 30}]}constend={x: 100,y: 200,radius: [50,90,{z: 10}]}constframeNum=3consteaseCurve='linear'constdeep=truetransition(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'constcurveName='linear'// 可以使用绘制工具获得constbezierCurve=[[[0,1]],[[1,0]]]extendCurves(curveName,bezierCurve)

缓动曲线绘制工具

缓动曲线表

linear

linear

easeInSine

linear

easeOutSine

linear

easeInOutSine

linear

easeInQuad

linear

easeOutQuad

linear

easeInOutQuad

linear

easeInCubic

linear

easeOutCubic

linear

easeInOutCubic

linear

easeInQuart

linear

easeOutQuart

linear

easeInOutQuart

linear

easeInQuint

linear

easeOutQuint

linear

easeInOutQuint

linear

easeInBack

linear

easeOutBack

linear

easeInOutBack

linear

easeInElastic

linear

easeOutElastic

linear

easeInOutElastic

linear

easeInBounce

linear

easeOutBounce

linear

easeInOutBounce

linear

About

基于贝塞尔曲线的动效插件，提供常用缓动曲线，支持自定义缓动曲线

transition.jiaminghi.com

Resources

Readme
MIT license
Activity
Custom properties

Stars

24 stars

Watchers

0 watching

Forks

9 forks
Report repository

Releases

Packages

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
BranchesTags
Repository files navigation
ENGLISH
Transition
Travis CILICENSENPM
Transition 是什么?
  • 它是一个基于贝塞尔曲线的动效插件。
  • 它提供常用的缓动曲线。
  • 支持自定义缓动曲线。
动画是如何产生的?
  • 获取一帧动画数据
  • 根据动画数据渲染图像
  • 重复...
我们可以使用三组数据去描述一段动画（动画起始状态、动画结束状态、缓动曲线），根据这三组数据我们可以计算出动画过程中每一帧动画的状态。这就是**Transition**所提供的功能，根据每一帧动画的状态，我们不断的进行重绘，动画就产生了。
npm 安装
$ npm install @jiaminghi/transition
使用
import{transition,injectNewCurve}from'@jiaminghi/transition'// do something
快速体验
<!--调试版--><scriptsrc="https://unpkg.com/@jiaminghi/transition/dist/index.js"></script><!--压缩版--><scriptsrc="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[]} 过渡帧数据 */typetransition=<T>(easeCurve: EaseCurve,startState: T,endState: T,frameNum=30,deep=false)=>T[]
示例
Transition 支持三种数据类型以描述动画状态.
Number
importtransitionfrom'@jiaminghi/transition'conststart=0constend=100constframeNum=10consteaseCurve='linear'transition(easeCurve,start,end,frameNum)/** * [ * 0, 11.111111111111112, 22.222222222222225, * 33.333333333333336, 44.44444444444445, 55.55555555555556, * 66.66666666666667, 77.77777777777779, 88.8888888888889, 100 * ] */
Array
importtransitionfrom'@jiaminghi/transition'conststart=[10,20,30]constend=[100,200,300]constframeNum=3consteaseCurve='linear'transition(easeCurve,start,end,frameNum)/** * [ * [10, 20, 30], * [55, 110, 165], * [100, 200, 300] * ] */
Object
importtransitionfrom'@jiaminghi/transition'conststart={x: 0,y: 20}constend={x: 100,y: 200}constframeNum=3consteaseCurve='linear'transition(easeCurve,start,end,frameNum)/** * [ * { x: 0, y: 20 }, * { x: 50, y: 110 }, * { x: 100, y: 200 } * ] */
Deep
启用递归模式以计算Array或Object中的深层数据.
importtransitionfrom'@jiaminghi/transition'conststart={x: 0,y: 20,radius: [10,20,{z: 30}]}constend={x: 100,y: 200,radius: [50,90,{z: 10}]}constframeNum=3consteaseCurve='linear'constdeep=truetransition(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'constcurveName='linear'// 可以使用绘制工具获得constbezierCurve=[[[0,1]],[[1,0]]]extendCurves(curveName,bezierCurve)
缓动曲线绘制工具
缓动曲线表
linear
linear
easeInSine
linear
easeOutSine
linear
easeInOutSine
linear
easeInQuad
linear
easeOutQuad
linear
easeInOutQuad
linear
easeInCubic
linear
easeOutCubic
linear
easeInOutCubic
linear
easeInQuart
linear
easeOutQuart
linear
easeInOutQuart
linear
easeInQuint
linear
easeOutQuint
linear
easeInOutQuint
linear
easeInBack
linear
easeOutBack
linear
easeInOutBack
linear
easeInElastic
linear
easeOutElastic
linear
easeInOutElastic
linear
easeInBounce
linear
easeOutBounce
linear
easeInOutBounce
linear
About
基于贝塞尔曲线的动效插件，提供常用缓动曲线，支持自定义缓动曲线
transition.jiaminghi.com
Resources
Readme
MIT license
Activity
Custom properties
Stars
24 stars
Watchers
0 watching
Forks
9 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
ENGLISH
Transition
Travis CILICENSENPM
Transition 是什么?
  • 它是一个基于贝塞尔曲线的动效插件。
  • 它提供常用的缓动曲线。
  • 支持自定义缓动曲线。
动画是如何产生的?
  • 获取一帧动画数据
  • 根据动画数据渲染图像
  • 重复...
我们可以使用三组数据去描述一段动画（动画起始状态、动画结束状态、缓动曲线），根据这三组数据我们可以计算出动画过程中每一帧动画的状态。这就是**Transition**所提供的功能，根据每一帧动画的状态，我们不断的进行重绘，动画就产生了。
npm 安装
$ npm install @jiaminghi/transition
使用
import{transition,injectNewCurve}from'@jiaminghi/transition'// do something
快速体验
<!--调试版--><scriptsrc="https://unpkg.com/@jiaminghi/transition/dist/index.js"></script><!--压缩版--><scriptsrc="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[]} 过渡帧数据 */typetransition=<T>(easeCurve: EaseCurve,startState: T,endState: T,frameNum=30,deep=false)=>T[]
示例
Transition 支持三种数据类型以描述动画状态.
Number
importtransitionfrom'@jiaminghi/transition'conststart=0constend=100constframeNum=10consteaseCurve='linear'transition(easeCurve,start,end,frameNum)/** * [ * 0, 11.111111111111112, 22.222222222222225, * 33.333333333333336, 44.44444444444445, 55.55555555555556, * 66.66666666666667, 77.77777777777779, 88.8888888888889, 100 * ] */
Array
importtransitionfrom'@jiaminghi/transition'conststart=[10,20,30]constend=[100,200,300]constframeNum=3consteaseCurve='linear'transition(easeCurve,start,end,frameNum)/** * [ * [10, 20, 30], * [55, 110, 165], * [100, 200, 300] * ] */
Object
importtransitionfrom'@jiaminghi/transition'conststart={x: 0,y: 20}constend={x: 100,y: 200}constframeNum=3consteaseCurve='linear'transition(easeCurve,start,end,frameNum)/** * [ * { x: 0, y: 20 }, * { x: 50, y: 110 }, * { x: 100, y: 200 } * ] */
Deep
启用递归模式以计算Array或Object中的深层数据.
importtransitionfrom'@jiaminghi/transition'conststart={x: 0,y: 20,radius: [10,20,{z: 30}]}constend={x: 100,y: 200,radius: [50,90,{z: 10}]}constframeNum=3consteaseCurve='linear'constdeep=truetransition(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'constcurveName='linear'// 可以使用绘制工具获得constbezierCurve=[[[0,1]],[[1,0]]]extendCurves(curveName,bezierCurve)
缓动曲线绘制工具
缓动曲线表
linear
linear
easeInSine
linear
easeOutSine
linear
easeInOutSine
linear
easeInQuad
linear
easeOutQuad
linear
easeInOutQuad
linear
easeInCubic
linear
easeOutCubic
linear
easeInOutCubic
linear
easeInQuart
linear
easeOutQuart
linear
easeInOutQuart
linear
easeInQuint
linear
easeOutQuint
linear
easeInOutQuint
linear
easeInBack
linear
easeOutBack
linear
easeInOutBack
linear
easeInElastic
linear
easeOutElastic
linear
easeInOutElastic
linear
easeInBounce
linear
easeOutBounce
linear
easeInOutBounce
linear
About
基于贝塞尔曲线的动效插件，提供常用缓动曲线，支持自定义缓动曲线
transition.jiaminghi.com
Resources
Readme
MIT license
Activity
Custom properties
Stars
24 stars
Watchers
0 watching
Forks
9 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
ENGLISH
Transition
Travis CILICENSENPM
Transition 是什么?
  • 它是一个基于贝塞尔曲线的动效插件。
  • 它提供常用的缓动曲线。
  • 支持自定义缓动曲线。
动画是如何产生的?
  • 获取一帧动画数据
  • 根据动画数据渲染图像
  • 重复...
我们可以使用三组数据去描述一段动画（动画起始状态、动画结束状态、缓动曲线），根据这三组数据我们可以计算出动画过程中每一帧动画的状态。这就是**Transition**所提供的功能，根据每一帧动画的状态，我们不断的进行重绘，动画就产生了。
npm 安装
$ npm install @jiaminghi/transition
使用
import{transition,injectNewCurve}from'@jiaminghi/transition'// do something
快速体验
<!--调试版--><scriptsrc="https://unpkg.com/@jiaminghi/transition/dist/index.js"></script><!--压缩版--><scriptsrc="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[]} 过渡帧数据 */typetransition=<T>(easeCurve: EaseCurve,startState: T,endState: T,frameNum=30,deep=false)=>T[]
示例
Transition 支持三种数据类型以描述动画状态.
Number
importtransitionfrom'@jiaminghi/transition'conststart=0constend=100constframeNum=10consteaseCurve='linear'transition(easeCurve,start,end,frameNum)/** * [ * 0, 11.111111111111112, 22.222222222222225, * 33.333333333333336, 44.44444444444445, 55.55555555555556, * 66.66666666666667, 77.77777777777779, 88.8888888888889, 100 * ] */
Array
importtransitionfrom'@jiaminghi/transition'conststart=[10,20,30]constend=[100,200,300]constframeNum=3consteaseCurve='linear'transition(easeCurve,start,end,frameNum)/** * [ * [10, 20, 30], * [55, 110, 165], * [100, 200, 300] * ] */
Object
importtransitionfrom'@jiaminghi/transition'conststart={x: 0,y: 20}constend={x: 100,y: 200}constframeNum=3consteaseCurve='linear'transition(easeCurve,start,end,frameNum)/** * [ * { x: 0, y: 20 }, * { x: 50, y: 110 }, * { x: 100, y: 200 } * ] */
Deep
启用递归模式以计算Array或Object中的深层数据.
importtransitionfrom'@jiaminghi/transition'conststart={x: 0,y: 20,radius: [10,20,{z: 30}]}constend={x: 100,y: 200,radius: [50,90,{z: 10}]}constframeNum=3consteaseCurve='linear'constdeep=truetransition(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'constcurveName='linear'// 可以使用绘制工具获得constbezierCurve=[[[0,1]],[[1,0]]]extendCurves(curveName,bezierCurve)
缓动曲线绘制工具
缓动曲线表
linear
linear
easeInSine
linear
easeOutSine
linear
easeInOutSine
linear
easeInQuad
linear
easeOutQuad
linear
easeInOutQuad
linear
easeInCubic
linear
easeOutCubic
linear
easeInOutCubic
linear
easeInQuart
linear
easeOutQuart
linear
easeInOutQuart
linear
easeInQuint
linear
easeOutQuint
linear
easeInOutQuint
linear
easeInBack
linear
easeOutBack
linear
easeInOutBack
linear
easeInElastic
linear
easeOutElastic
linear
easeInOutElastic
linear
easeInBounce
linear
easeOutBounce
linear
easeInOutBounce
linear
About
基于贝塞尔曲线的动效插件，提供常用缓动曲线，支持自定义缓动曲线
transition.jiaminghi.com
Resources
Readme
MIT license
Activity
Custom properties
Stars
24 stars
Watchers
0 watching
Forks
9 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
BranchesTags
Repository files navigation
ENGLISH
Transition
Travis CILICENSENPM
Transition 是什么?
  • 它是一个基于贝塞尔曲线的动效插件。
  • 它提供常用的缓动曲线。
  • 支持自定义缓动曲线。
动画是如何产生的?
  • 获取一帧动画数据
  • 根据动画数据渲染图像
  • 重复...
我们可以使用三组数据去描述一段动画（动画起始状态、动画结束状态、缓动曲线），根据这三组数据我们可以计算出动画过程中每一帧动画的状态。这就是**Transition**所提供的功能，根据每一帧动画的状态，我们不断的进行重绘，动画就产生了。
npm 安装
$ npm install @jiaminghi/transition
使用
import{transition,injectNewCurve}from'@jiaminghi/transition'// do something
快速体验
<!--调试版--><scriptsrc="https://unpkg.com/@jiaminghi/transition/dist/index.js"></script><!--压缩版--><scriptsrc="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[]} 过渡帧数据 */typetransition=<T>(easeCurve: EaseCurve,startState: T,endState: T,frameNum=30,deep=false)=>T[]
示例
Transition 支持三种数据类型以描述动画状态.
Number
importtransitionfrom'@jiaminghi/transition'conststart=0constend=100constframeNum=10consteaseCurve='linear'transition(easeCurve,start,end,frameNum)/** * [ * 0, 11.111111111111112, 22.222222222222225, * 33.333333333333336, 44.44444444444445, 55.55555555555556, * 66.66666666666667, 77.77777777777779, 88.8888888888889, 100 * ] */
Array
importtransitionfrom'@jiaminghi/transition'conststart=[10,20,30]constend=[100,200,300]constframeNum=3consteaseCurve='linear'transition(easeCurve,start,end,frameNum)/** * [ * [10, 20, 30], * [55, 110, 165], * [100, 200, 300] * ] */
Object
importtransitionfrom'@jiaminghi/transition'conststart={x: 0,y: 20}constend={x: 100,y: 200}constframeNum=3consteaseCurve='linear'transition(easeCurve,start,end,frameNum)/** * [ * { x: 0, y: 20 }, * { x: 50, y: 110 }, * { x: 100, y: 200 } * ] */
Deep
启用递归模式以计算Array或Object中的深层数据.
importtransitionfrom'@jiaminghi/transition'conststart={x: 0,y: 20,radius: [10,20,{z: 30}]}constend={x: 100,y: 200,radius: [50,90,{z: 10}]}constframeNum=3consteaseCurve='linear'constdeep=truetransition(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'constcurveName='linear'// 可以使用绘制工具获得constbezierCurve=[[[0,1]],[[1,0]]]extendCurves(curveName,bezierCurve)
缓动曲线绘制工具
缓动曲线表
linear
linear
easeInSine
linear
easeOutSine
linear
easeInOutSine
linear
easeInQuad
linear
easeOutQuad
linear
easeInOutQuad
linear
easeInCubic
linear
easeOutCubic
linear
easeInOutCubic
linear
easeInQuart
linear
easeOutQuart
linear
easeInOutQuart
linear
easeInQuint
linear
easeOutQuint
linear
easeInOutQuint
linear
easeInBack
linear
easeOutBack
linear
easeInOutBack
linear
easeInElastic
linear
easeOutElastic
linear
easeInOutElastic
linear
easeInBounce
linear
easeOutBounce
linear
easeInOutBounce
linear
About
基于贝塞尔曲线的动效插件，提供常用缓动曲线，支持自定义缓动曲线
transition.jiaminghi.com
Resources
Readme
MIT license
Activity
Custom properties
Stars
24 stars
Watchers
0 watching
Forks
9 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
ENGLISH
Transition
Travis CILICENSENPM
Transition 是什么?
  • 它是一个基于贝塞尔曲线的动效插件。
  • 它提供常用的缓动曲线。
  • 支持自定义缓动曲线。
动画是如何产生的?
  • 获取一帧动画数据
  • 根据动画数据渲染图像
  • 重复...
我们可以使用三组数据去描述一段动画（动画起始状态、动画结束状态、缓动曲线），根据这三组数据我们可以计算出动画过程中每一帧动画的状态。这就是**Transition**所提供的功能，根据每一帧动画的状态，我们不断的进行重绘，动画就产生了。
npm 安装
$ npm install @jiaminghi/transition
使用
import{transition,injectNewCurve}from'@jiaminghi/transition'// do something
快速体验
<!--调试版--><scriptsrc="https://unpkg.com/@jiaminghi/transition/dist/index.js"></script><!--压缩版--><scriptsrc="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[]} 过渡帧数据 */typetransition=<T>(easeCurve: EaseCurve,startState: T,endState: T,frameNum=30,deep=false)=>T[]
示例
Transition 支持三种数据类型以描述动画状态.
Number
importtransitionfrom'@jiaminghi/transition'conststart=0constend=100constframeNum=10consteaseCurve='linear'transition(easeCurve,start,end,frameNum)/** * [ * 0, 11.111111111111112, 22.222222222222225, * 33.333333333333336, 44.44444444444445, 55.55555555555556, * 66.66666666666667, 77.77777777777779, 88.8888888888889, 100 * ] */
Array
importtransitionfrom'@jiaminghi/transition'conststart=[10,20,30]constend=[100,200,300]constframeNum=3consteaseCurve='linear'transition(easeCurve,start,end,frameNum)/** * [ * [10, 20, 30], * [55, 110, 165], * [100, 200, 300] * ] */
Object
importtransitionfrom'@jiaminghi/transition'conststart={x: 0,y: 20}constend={x: 100,y: 200}constframeNum=3consteaseCurve='linear'transition(easeCurve,start,end,frameNum)/** * [ * { x: 0, y: 20 }, * { x: 50, y: 110 }, * { x: 100, y: 200 } * ] */
Deep
启用递归模式以计算Array或Object中的深层数据.
importtransitionfrom'@jiaminghi/transition'conststart={x: 0,y: 20,radius: [10,20,{z: 30}]}constend={x: 100,y: 200,radius: [50,90,{z: 10}]}constframeNum=3consteaseCurve='linear'constdeep=truetransition(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'constcurveName='linear'// 可以使用绘制工具获得constbezierCurve=[[[0,1]],[[1,0]]]extendCurves(curveName,bezierCurve)
缓动曲线绘制工具
缓动曲线表
linear
linear
easeInSine
linear
easeOutSine
linear
easeInOutSine
linear
easeInQuad
linear
easeOutQuad
linear
easeInOutQuad
linear
easeInCubic
linear
easeOutCubic
linear
easeInOutCubic
linear
easeInQuart
linear
easeOutQuart
linear
easeInOutQuart
linear
easeInQuint
linear
easeOutQuint
linear
easeInOutQuint
linear
easeInBack
linear
easeOutBack
linear
easeInOutBack
linear
easeInElastic
linear
easeOutElastic
linear
easeInOutElastic
linear
easeInBounce
linear
easeOutBounce
linear
easeInOutBounce
linear
About
基于贝塞尔曲线的动效插件，提供常用缓动曲线，支持自定义缓动曲线
transition.jiaminghi.com
Resources
Readme
MIT license
Activity
Custom properties
Stars
24 stars
Watchers
0 watching
Forks
9 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
ENGLISH
Transition
Travis CILICENSENPM
Transition 是什么?
  • 它是一个基于贝塞尔曲线的动效插件。
  • 它提供常用的缓动曲线。
  • 支持自定义缓动曲线。
动画是如何产生的?
  • 获取一帧动画数据
  • 根据动画数据渲染图像
  • 重复...
我们可以使用三组数据去描述一段动画（动画起始状态、动画结束状态、缓动曲线），根据这三组数据我们可以计算出动画过程中每一帧动画的状态。这就是**Transition**所提供的功能，根据每一帧动画的状态，我们不断的进行重绘，动画就产生了。
npm 安装
$ npm install @jiaminghi/transition
使用
import{transition,injectNewCurve}from'@jiaminghi/transition'// do something
快速体验
<!--调试版--><scriptsrc="https://unpkg.com/@jiaminghi/transition/dist/index.js"></script><!--压缩版--><scriptsrc="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[]} 过渡帧数据 */typetransition=<T>(easeCurve: EaseCurve,startState: T,endState: T,frameNum=30,deep=false)=>T[]
示例
Transition 支持三种数据类型以描述动画状态.
Number
importtransitionfrom'@jiaminghi/transition'conststart=0constend=100constframeNum=10consteaseCurve='linear'transition(easeCurve,start,end,frameNum)/** * [ * 0, 11.111111111111112, 22.222222222222225, * 33.333333333333336, 44.44444444444445, 55.55555555555556, * 66.66666666666667, 77.77777777777779, 88.8888888888889, 100 * ] */
Array
importtransitionfrom'@jiaminghi/transition'conststart=[10,20,30]constend=[100,200,300]constframeNum=3consteaseCurve='linear'transition(easeCurve,start,end,frameNum)/** * [ * [10, 20, 30], * [55, 110, 165], * [100, 200, 300] * ] */
Object
importtransitionfrom'@jiaminghi/transition'conststart={x: 0,y: 20}constend={x: 100,y: 200}constframeNum=3consteaseCurve='linear'transition(easeCurve,start,end,frameNum)/** * [ * { x: 0, y: 20 }, * { x: 50, y: 110 }, * { x: 100, y: 200 } * ] */
Deep
启用递归模式以计算Array或Object中的深层数据.
importtransitionfrom'@jiaminghi/transition'conststart={x: 0,y: 20,radius: [10,20,{z: 30}]}constend={x: 100,y: 200,radius: [50,90,{z: 10}]}constframeNum=3consteaseCurve='linear'constdeep=truetransition(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'constcurveName='linear'// 可以使用绘制工具获得constbezierCurve=[[[0,1]],[[1,0]]]extendCurves(curveName,bezierCurve)
缓动曲线绘制工具
缓动曲线表
linear
linear
easeInSine
linear
easeOutSine
linear
easeInOutSine
linear
easeInQuad
linear
easeOutQuad
linear
easeInOutQuad
linear
easeInCubic
linear
easeOutCubic
linear
easeInOutCubic
linear
easeInQuart
linear
easeOutQuart
linear
easeInOutQuart
linear
easeInQuint
linear
easeOutQuint
linear
easeInOutQuint
linear
easeInBack
linear
easeOutBack
linear
easeInOutBack
linear
easeInElastic
linear
easeOutElastic
linear
easeInOutElastic
linear
easeInBounce
linear
easeOutBounce
linear
easeInOutBounce
linear
About
基于贝塞尔曲线的动效插件，提供常用缓动曲线，支持自定义缓动曲线
transition.jiaminghi.com
Resources
Readme
MIT license
Activity
Custom properties
Stars
24 stars
Watchers
0 watching
Forks
9 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
BranchesTags
Repository files navigation
ENGLISH
Transition
Travis CILICENSENPM
Transition 是什么?
  • 它是一个基于贝塞尔曲线的动效插件。
  • 它提供常用的缓动曲线。
  • 支持自定义缓动曲线。
动画是如何产生的?
  • 获取一帧动画数据
  • 根据动画数据渲染图像
  • 重复...
我们可以使用三组数据去描述一段动画（动画起始状态、动画结束状态、缓动曲线），根据这三组数据我们可以计算出动画过程中每一帧动画的状态。这就是**Transition**所提供的功能，根据每一帧动画的状态，我们不断的进行重绘，动画就产生了。
npm 安装
$ npm install @jiaminghi/transition
使用
import{transition,injectNewCurve}from'@jiaminghi/transition'// do something
快速体验
<!--调试版--><scriptsrc="https://unpkg.com/@jiaminghi/transition/dist/index.js"></script><!--压缩版--><scriptsrc="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[]} 过渡帧数据 */typetransition=<T>(easeCurve: EaseCurve,startState: T,endState: T,frameNum=30,deep=false)=>T[]
示例
Transition 支持三种数据类型以描述动画状态.
Number
importtransitionfrom'@jiaminghi/transition'conststart=0constend=100constframeNum=10consteaseCurve='linear'transition(easeCurve,start,end,frameNum)/** * [ * 0, 11.111111111111112, 22.222222222222225, * 33.333333333333336, 44.44444444444445, 55.55555555555556, * 66.66666666666667, 77.77777777777779, 88.8888888888889, 100 * ] */
Array
importtransitionfrom'@jiaminghi/transition'conststart=[10,20,30]constend=[100,200,300]constframeNum=3consteaseCurve='linear'transition(easeCurve,start,end,frameNum)/** * [ * [10, 20, 30], * [55, 110, 165], * [100, 200, 300] * ] */
Object
importtransitionfrom'@jiaminghi/transition'conststart={x: 0,y: 20}constend={x: 100,y: 200}constframeNum=3consteaseCurve='linear'transition(easeCurve,start,end,frameNum)/** * [ * { x: 0, y: 20 }, * { x: 50, y: 110 }, * { x: 100, y: 200 } * ] */
Deep
启用递归模式以计算Array或Object中的深层数据.
importtransitionfrom'@jiaminghi/transition'conststart={x: 0,y: 20,radius: [10,20,{z: 30}]}constend={x: 100,y: 200,radius: [50,90,{z: 10}]}constframeNum=3consteaseCurve='linear'constdeep=truetransition(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'constcurveName='linear'// 可以使用绘制工具获得constbezierCurve=[[[0,1]],[[1,0]]]extendCurves(curveName,bezierCurve)
缓动曲线绘制工具
缓动曲线表
linear
linear
easeInSine
linear
easeOutSine
linear
easeInOutSine
linear
easeInQuad
linear
easeOutQuad
linear
easeInOutQuad
linear
easeInCubic
linear
easeOutCubic
linear
easeInOutCubic
linear
easeInQuart
linear
easeOutQuart
linear
easeInOutQuart
linear
easeInQuint
linear
easeOutQuint
linear
easeInOutQuint
linear
easeInBack
linear
easeOutBack
linear
easeInOutBack
linear
easeInElastic
linear
easeOutElastic
linear
easeInOutElastic
linear
easeInBounce
linear
easeOutBounce
linear
easeInOutBounce
linear
About
基于贝塞尔曲线的动效插件，提供常用缓动曲线，支持自定义缓动曲线
transition.jiaminghi.com
Resources
Readme
MIT license
Activity
Custom properties
Stars
24 stars
Watchers
0 watching
Forks
9 forks
Report repository
Releases
Packages
Used by
Contributors
Languages