乙個精簡的js動畫庫實現 可自行擴充套件須要的內容

animation.js

由於專案須要做一些動畫，並不想讓整個專案引入太多的內容導致檔案過大，所以為了滿足要求寫了乙個精簡的可擴充套件的動畫庫功能是簡單模仿d3.js裡面的tween函式

animation()

.easing(animation.easing.linear)
.delay(500)
.duration(1000)
.run((i) => )
.then(() => )

這裡帖上乙個

let easing = ,

quad: ,
easeout: function (t, b, c, d) ,
easeinout: function (t, b, c, d) 
},cubic: ,
easeout: function (t, b, c, d) ,
easeinout: function (t, b, c, d) 
},quart: ,
easeout: function (t, b, c, d) ,
easeinout: function (t, b, c, d) 
},quint: ,
easeout: function (t, b, c, d) ,
easeinout: function (t, b, c, d) 
},sine: ,
easeout: function (t, b, c, d) ,
easeinout: function (t, b, c, d) 
},expo: ,
easeout: function (t, b, c, d) ,
easeinout: function (t, b, c, d) 
},circ: ,
easeout: function (t, b, c, d) ,
easeinout: function (t, b, c, d) 
},elastic:  else var s = p / (2 * math.pi) * math.asin(c / a)
return -(a * math.pow(2, 10 * (t -= 1)) * math.sin((t * d - s) * (2 * math.pi) / p)) + b
},easeout: function (t, b, c, d, a, p)  else var s = p / (2 * math.pi) * math.asin(c / a)
return (a * math.pow(2, -10 * t) * math.sin((t * d - s) * (2 * math.pi) / p) + c + b)
},easeinout: function (t, b, c, d, a, p)  else var s = p / (2 * math.pi) * math.asin(c / a)
if (t < 1) return -0.5 * (a * math.pow(2, 10 * (t -= 1)) * math.sin((t * d - s) * (2 * math.pi) / p)) + b
return a * math.pow(2, -10 * (t -= 1)) * math.sin((t * d - s) * (2 * math.pi) / p) * 0.5 + c + b}},
back: ,
easeout: function (t, b, c, d, s) ,
easeinout: function (t, b, c, d, s) 
},bounce: ,
easeout: function (t, b, c, d)  else if (t < (2 / 2.75))  else if (t < (2.5 / 2.75))  else 
},easeinout: function (t, b, c, d) 
}}

這個也是網上一找一大把,這裡貼上我用的**

var vendors = ['webkit', 'moz']

for (var x = 0; x < vendors.length && !window.requestanimationframe; ++x) 
if (!window.requestanimationframe) , timetocall)
lasttime = currtime + timetocall
return id
}}if (!window.cancelanimationframe) 
}

function time () 

return date.now ? date.now() : (new date()).gettime()
}

核心是利用緩動函式進行目標值生成

緩動引數的說明:

t: 已經流逝的時間

b: 初始值

c: 目標值

d: 總時間

可以看出來緩動函式的大概功能是

根據 【t所佔d的比例】

算出 【b-c之間的值】

我們只須要開始乙個輪詢，傳入執行函式的時間和值直到結束就行了

下面看**

class animationcore 

/*** 設定 執行動畫的時間
* */
duration (d) 
/*** 設定 開始動畫的間隔
* */
delay (d) 
/*** 設定 緩動函式
* */
easing (e) 
/*** 停止
* */
stop () 
}  /**
* 結束並到最後狀態
* */
finish () 
}  /**
* 開始 動畫
* */
run (action, easingfunction)  else this.timer = requestanimationframe(step)
}this.timer = requestanimationframe(step)
}, this.__delay__)
})}}

function animation () 

animation.easing = easing
// 匯出
export default animation

乙個聖誕動畫的實現

看下面的例子 test.c include main char str i like linux i advices you jion in the linux world printf s n str exit 0 使用gcc編譯 輸入gcc c test.c得到目標檔案test.o。c命令表示對...

React Native的乙個動畫庫lottie

正好最近發現乙個很好玩的元件，就和大家分享一下。這個東西本來是用在android ios的，airbnb還特意做了個rn版本，不過本質上也是用的原生，所以差不多。其實流程很簡單，就是用ae做出動畫，用bodymovin外掛程式把動畫匯出成json，lottie會解析這個json並且渲染出來。看個官方...

CAShaplayer實現乙個載入動畫

思路 方法 建立乙個圖層，圖層要求圓形，可傳引數顏色 大小 方法 給圖層設定位置和整個載入動畫的大小 之後給其新增動畫，並且注意動畫的begintime要有間距 建立layer func createlayerwith size cgsize,color uicolor calayer let la...