iT邦幫忙

DAY 26
4

jQuery 套件開發之我可不可以跳著說系列 第 22

jQuery套件開發之(二十四),rySpriteMaker

_animationsk的技術

套件名稱:rySpriteMaker
套件型態:軍隊 (軍隊/英雄) 分別代表很多widget或是只有一個widget
套件用途:在畫面上產生換圖動畫
套件特色&規格:
必要參數有
圖片的url
每一格的起始X軸、起始Y軸、圖寬、圖高。
fps

附加參數有
漸淡
zIndex
執行總秒數
是否移除

套件角色說明:
1.一個顯示的div叫作一個widget

決定採用css3_animationsk的技術
http://www.w3schools.com/css3/css3\_animations.asp

不過在IE要IE10才能跑的樣子,恩...不鳥他。

#animated_div
{
    width:60px;
    height:40px;
    background:#92B901;
    color:#ffffff;
    position:relative;
    font-weight:bold;
    font-size:20px;
    padding:10px;
    animation:animated_div 5s 1;
    -moz-animation:animated_div 5s 1;
    -webkit-animation:animated_div 5s 1;
    -o-animation:animated_div 5s 1;
    border-radius:5px;
    -webkit-border-radius:5px;
}
1.#animated_div不必是一個圖,因為他也只是針對style設值而已
    個人感覺,相當類似以前的flash
2.animated_div是call function的概念,總共執行五秒、一次。
[code]
@keyframes animated_div
{
    0%		{transform: rotate(0deg);left:0px;}
    25%		{transform: rotate(20deg);left:0px;}
    50%		{transform: rotate(0deg);left:500px;}
    55%		{transform: rotate(0deg);left:500px;}
    70%		{transform: rotate(0deg);left:500px;background:#1ec7e6;}
    100%	{transform: rotate(-360deg);left:0px;}
}   

記得要加上有前綴的版本
@-webkit-
@-moz-
@-o-
百分比是五秒之間到了哪個階段。
其中50%-55%並沒有改變CSS。
所以,就是單純的停留一下下
我覺得很不方便,因為如果我想確切的停留一秒我不知道怎麼弄。
所以其實在實作上,位移的部分我會避免使用自己寫
位移用jQuery來代勞即可,我這邊要專注我的sprite animation

再針對參數的部分作解說
-webkit-animation-name:myfirst; //function name
-webkit-animation-duration:5s; //動畫時間
-webkit-animation-timing-function:linear; //動畫曲線
-webkit-animation-delay:2s; //延遲
-webkit-animation-iteration-count:2; //執行次數
-webkit-animation-direction:normal; //alternate會反過來執行動畫 / normal


上一篇
jQuery套件開發之(二十三),開發新套件嚕~spriteMaker
下一篇
jQuery套件開發之(二十五),rySpriteMaker完成
系列文
jQuery 套件開發之我可不可以跳著說26

1 則留言

0
sheephead081
iT邦新手 4 級 ‧ 2013-10-11 15:11:36

animation-timing-function:
linear: 線性
ease: 加速,最後慢
ease-in:漸強
ease-out:漸弱
ease-in-out:老實說有點像ease只是沒那麼強烈

我要留言

立即登入留言