湯不熱分享動畫

別問我為什麼上湯不熱（猥瑣臉），友盡！

tumblr 分享成功會有這麼個動畫，覺得挺有意思，就扒出來看了看……

第一感覺以為是 canvas 繪製的，後來發現居然是原生dom操作，嘿嘿，我就喜歡這種！

首先自然是去找 dom 結構，chrome 除錯出來結果如下：

pnj檔案是主要與 binary data 相關的 uncommon files。其他型別的檔案也可能使用pnj檔案副檔名。

方便理解跟演示，已經替換成國內可訪問的源以及 img 標籤。

@keyframes jump 

80% 
90% 
100% 
}.box 
@keyframes dance 
21% 
28% 
71% 
78% 
100% 
}.rotate 

其中涉及幾個問題：

animation-timing-function

cubic-bezier

rotate 延時 0.5s 的作用

這個是對動畫執行時間（或效果）的定製，一般我們都會寫到 animation 裡面，比如：linear、ease 等，對，沒錯，就這個東西。

我所知道的就是跟 cubic-bezier 一起用……擱下面一起說。

貝塞爾曲線，這個往深了說，我自己都蒙，玩 ps 的高手應該很熟悉這個東西，就是乙個拉兩邊會讓直線變曲線的東西，貌似鋼筆工具有用到這個。

回到上面那個 linear，其實就是：

animation-timing-function: cubic-bezier(0, 0, 1, 1) / cubic-bezier(1, 1, 0, 0);

animation-timing-function: cubic-bezier(.25, .1, .25, 1);

所以 box 的動畫就是上下跳動，在到達底部的時候 x 軸撐開，效果就這樣，好理解的多。

其實看懂就很清楚了，這個轉動動畫一共花了 10s，前 28% 的時間進行了一次逆時針單圈，中間休息老久，然後後面 71% 開始到 78% 很短的時間進行了順時針的兩圈，看起來特別好玩，也很好看。

逆時針單圈

順時針兩圈

具體效果：點我看效果

為了讓動畫更自然，沒有這個延時或者延時不對會出現跳動不自然，請自行原始碼嘗試……

**：

但是，像我這種神經病會這樣簡單的結束嗎？

哼哼哼……

具體效果：點我看效果

告誡廣大前端小夥伴，這個東西不要自己盲目創作，***。如有必要，請甩鍋給設計大大，實在不行，找對應的動畫生成器去……

恩，目測湯不熱的是動畫生成器生成的沒跑了。

對了，別問我後面的撒花效果，那是canvas，自己找庫去，大把大把的有。dom 動畫才是真愛。

喜歡請點個 star，謝謝。

更多專業前端知識，請上

【猿2048】www.mk2048.com

湯真的不熱了，打擊色情內容30天訪問量暴減1億

新浪科技訊 北京時間 3 月 15 日晚間訊息，據程式設計客棧cnet 報道，web分析公司similarweb資料顯示，輕部落格應用湯不熱 twww.cppcns.comumblr 自去年 12 月開始打擊色情內容以來，其月度頁面訪問量 pv 大幅下滑。similarweb資料顯示，在打擊色情內容...

ExtJs 常用動畫效果 分享

一些常用的動畫函式 element.slidein string ancho,object animation 元素從上滑入效果,引數 string ancho,object animation 可 不帶引數呼叫下同 element.slideout t 指定方向 t top,b buttom,l ...

傻瓜式動畫製作軟體 乾貨分享 二維動畫製作軟體

在即將畢業的大學生中，出來找工作，會問二維動畫製作都是用什麼軟體？哪種軟體功能比較強大一點，能做出像日本的那種動畫，一般高校在學校培訓時候都是只教了flash這個軟體，但我們知道這個軟體侷限性比較大，很難做出像日本動漫的那種效果。合肥凌智動畫一家專業從事二維動畫製作公司，從事動畫製作有十幾年之久，擁...