消息稱迪士尼要拍真人版《魔發(fā)奇緣》：女主可能也找黑人演員
8月5日消息，迪士尼確實有點忙，忙著將不少動畫改成真人版，繼《美人魚》后，真人版《白雪公主》、《魔發(fā)奇緣》也在路上了。據(jù)外媒消息稱，迪士尼將打造真人版
大家好，我是林三心，用最通俗易懂的話講最難的知識點是我的座右銘，基礎是進階的前提是我的初心~
平時瀏覽一些跟數(shù)字有關的網(wǎng)頁的時候，可能你會發(fā)現(xiàn)數(shù)字并不是直接從 0 變成 99999 的，這樣會很生硬，而是會有一個從 0 增長到 99999 的動畫效果，如下圖
圖片
那這個效果要怎么實現(xiàn)呢？其實挺簡單的，也挺有趣的，繼續(xù)往下看吧~
我們創(chuàng)建一個文件 use-number-animation.ts 來寫這個 hooks
首先來確定這個函數(shù)需要接受什么參數(shù)：
圖片
圖片
可以看到數(shù)字是在不停變化的，所以我們需要有一個定時任務去讓這個數(shù)字一直變化才行，那么用 setInterval 嗎？不是的，顯然用 requestAnimationFrame 性能會更佳，它會在瀏覽器下一幀重繪之前執(zhí)行~
圖片
圖片
可以看到數(shù)字在不斷增長，那么既然是增長，就需要計算增長速度，增長速度要怎么算呢？
假設我要用3000ms的時間去從0增長到378291.668，那增長速度是不是 (378291.668 - 0) / 3000呢？
圖片
由此我們可以知道增長速度 speed = (to - from) / duration;
啥時候終止增長呢？其實很簡單，那就是從開始增長開始，經(jīng)過的時間大于 duration 時，就終止，這個時候說明動畫必須要結束的~
可以得出最終的代碼為
圖片
使用方式如下
最終達到數(shù)字增長的動畫效果~
圖片
本文鏈接：http://www.tebozhan.com/showinfo-26-84002-0.htmlVue3 實現(xiàn)超級有趣的功能：數(shù)字增長動畫??！
聲明：本網(wǎng)頁內容旨在傳播知識，若有侵權等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯(lián)系：2376512515@qq.com 津ICP備18001702號
津公網(wǎng)安備 12010102000574號