1.抖動封裝
/*
????op:?{
????????el，
????????attr,
????????shakeLength
????}
*/????
function?shake(op){
????var?el?=?op.el,
????attr?=?op.attr,
????shakeLength?=?op.shakeLength||15,
????start?=?css(box,attr),
????shakeArr?=?[];
????for(var?i?=?shakeLength;?i?>=?0;?i--){
????????shakeArr.push(i%2?i:-i);
????}
????move();
????function?move(){
????????requestAnimationFrame(function(){
????????????if(shakeArr.length?<=?0){
????????????????console.log("抖動完成");
????????????}?else?{
????????????????css(el,attr,start?+?shakeArr.shift());
????????????????console.log(1);
????????????????move();
????????????}
????????});
????}
}????
(function(){
????var?box?=?document.querySelector("#box");
????shake({
????????el:?box,
????????attr:?"width",
????????shakeLength:?20
????});
})();
2.多值同時抖動
<script>
/*
????op:?{
????????el，
????????attr,
????????shakeLength
????}
*/????
function?shake(op){
????var?el?=?op.el,
????attr?=?op.attr,
????shakeLength?=?op.shakeLength||15,
????start?=?{},
????shakeArr?=?[];
????if(typeof?attr?===?"object"?){
????????for(var?i?=?0;?i?<?attr.length;?i++){
????????????start[attr[i]]?=?css(el,attr[i]);
????????}
????}?else?{
????????start[attr]?=?css(el,attr);
????}
????for(var?i?=?shakeLength;?i?>=?0;?i--){
????????shakeArr.push(i%2?i:-i);
????}
????move();
????function?move(){
????????requestAnimationFrame(function(){
????????????if(shakeArr.length?<=?0){
????????????????console.log("抖動完成");
????????????}?else?{
????????????????var?nub?=?shakeArr.shift();
????????????????for(var?s?in?start){
????????????????????css(el,s,start[s]?+?nub);
????????????????}
????????????????move();
????????????}
????????});
????}
}????
(function(){
????var?box?=?document.querySelector("#box");
????shake({
????????el:?box,
????????attr:?["width","height","opacity"],
????????shakeLength:?20
????});
})();
</script>
3.抖動函數(shù)完整封裝
<script>
/*
????op:?{
????????el，
????????attr,
????????shakeLength
????}
*/????
function?shake(op){
????var?el?=?op.el,
????attr?=?op.attr,
????shakeLength?=?op.shakeLength||15,
????shakeArr?=?[];
????el.shakeStart?=?{};
????if(el.shake)?{
????????return?;
????}?
????if(typeof?attr?===?"object"?){
????????for(var?i?=?0;?i?<?attr.length;?i++){
????????????el.shakeStart[attr[i]]?=?css(el,attr[i]);
????????}
????}?else?{
????????el.shakeStart[attr]?=?css(el,attr);
????}
????for(var?i?=?shakeLength;?i?>=?0;?i--){
????????shakeArr.push(i%2?i:-i);
????}
????move();
????function?move(){
????????el.shake?=?requestAnimationFrame(function(){
????????????if(shakeArr.length?<=?0){
????????????????el.shake?=?false;
????????????????op.cb&&op.cb();
????????????}?else?{
????????????????var?nub?=?shakeArr.shift();
????????????????for(var?s?in??el.shakeStart){
????????????????????css(el,s,?el.shakeStart[s]?+?nub);
????????????????}
????????????????move();
????????????}
????????});
????}
}????
shake.stop?=?function(el){
????cancelAnimationFrame(el.shake);
????el.shake?=?false;
????for(var?s?in??el.shakeStart){
????????css(el,s,?el.shakeStart[s]);
????}
};
(function(){
????var?box?=?document.querySelector("#box");
????box.onclick?=?function(){
????????shake.stop(box);
????????shake({
????????????el:?box,
????????????attr:?"left",
????????????shakeLength:?20,
????????????cb:?function(){
????????????????mTween({
????????????????????el:?box,
????????????????????attr:?{
????????????????????????top:?500
????????????????????},
????????????????????duration:?1000,
????????????????????fx:?"bounceOut"
????????????????});
????????????}
????????});
????};
})();
</script>
