Vue 讓元素抖動 擺動起來

2022-02-06 05:30:50 字數 1976 閱讀 8960

首先展示一下效果,狠狠點選 

**github : 

先說一下用法:

<

jitter

:start.sync

="抖動控制器"

:range

="":shift-percent

="0.1"

>

這裡是你要抖動的元素

jitter

>

思路:

1.抖動就是擺動,現實中的鐘擺可以很形象。

2.當擺動到臨界點後,就會向相反的方向擺動。

3.在沒有動力時,擺動會慢慢停止。

初始化抖動:

/*

* * 初始化抖動 */

initjitter() , , this

.range);

//獲取需要操作的的項 和 每次需要擺動的量

const = this

.getpositionandshiftnumber();

this.position =position;

this.shiftnumber =shiftnumber;

//初始 move 起始點是0

this.move = ;

//初始時 是順時針

this.isclockwise = true;

//執行動畫

this.timer = window.requestanimationframe(this

.continuejitter);

},

這裡準備動畫開始前的工作。

執行動畫:

//

持續抖動

continuejitter() );

//清除動畫

this

.clearanimate();

return

; }

//更新move為臨界點

this.move[p] = this.isclockwise ? -this.currentrange[p] : this

.currentrange[p];

//改變擺動方向

changedirection = true

; }

} if(changedirection)

//更新元素位置

this.jitterview(this

.move);

//繼續執行動畫

this.timer = window.requestanimationframe(this

.continuejitter);

},

執行動畫,當判斷已經無力擺動後,讓元素回歸到原來的位置,並清除動畫。

修改元素位置:

/*

* * 修改元素位置

* @param x

* @param y

* @param z */

jitterview() px, $px, $px)`;

},

這裡需要判斷需要 z 軸擺動嗎? 當需要時,必須給當前元素的父級新增perspective,從而修改子級透視效果

mounted() );

}},

最後看看可以傳的屬性:

props: 

range: ; },

},start: ,

shiftpercent: ,

perspectivestyle: ;

}}},

上面是可以傳的屬性,大家可以按照情況修改

最後:

這裡我只寫了簡單的動畫,也可以根據不同情況進行修改,從而達到想要的效果。這裡已經滿足輸入框錯誤抖動的效果了。

讓ProgressPar動起來

一.如果是單純的讓其動起來只用在載入時 duration duration new duration timespan.fromseconds 10 doubleanimation doubleanimation new doubleanimation 100.0 duration progbar....

android 遊戲 讓人物動起來

su ceview檢視建立,響應此函式 override public void su cecreated su ceholder holder param currentframe 繪製幀 param framew 每幀的高 param frameh 每幀的高 param canvas 畫布例項 ...

JQuery 實踐 讓頁面動起來

獲取和設定元素特性 特性屬性 是指dom元素中能夠和html元素中某個特性對應得上的屬性。通常js特性屬性的名稱與對應的特性一一匹配,但class classname 操作特性還是操作屬性,取決於想做什麼以及想如何去實現。jquery 沒有用於獲取或修改元素甦醒的具體命令。然而可以利用原生js表示法...