中文前端UI框架Kit(十一)搖頭動畫?讓你的頁面元素嗑葯嗑起來??


號外:kitjs官方討論QQ群建立了,QQ群號88093625,歡迎大家加入,討論前端相關話題

demo地址:http://xueduany.github.com/KitJs/KitJs/index.html#shakehead

發現沒有晃動效果的同學記得清下緩存,因為kit.anim對象的js文件有更新,3Q3Q

 

今天聽群里面兄弟在討論一個搖頭的動畫效果,類似登陸驗證時候,窗口晃動的效果,結合之前說過的kitjs的anim類,我們可以很輕松的實現類似的組件晃動效果

代碼如下:

function a1() {
                    $kit.anim.motion({
                        duration : 1000,//持續時間
                        el : "#test1",
                        fx : $kit.anim.fx('swing'),
                        from : {
                            'margin-left' : '50px'
                        },
                        to : {
                            'margin-left' : '0px'
                        },
                        reverse: true,
                        timeSeg: 33,//晃動頻率,自己調
                        then : function() {
                            $kit.log('搖動完畢?再shake一次?')
                        }
                    });
                }

對於kit.anim.motion方法新增了一個config.reverse參數,控制在動畫期間實現正反值的控制

image

 

 

效果不錯,有興趣的童鞋可以試試

 

有更多需求或者建議,歡迎加群討論^_^


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM