摘要：
鯉魚跳龍門動畫 1. 需求 年中618營銷活動要求做一個(gè)鯉魚跳龍門的動畫，產(chǎn)品參考了某寶上的一個(gè)動畫，要求模仿這個(gè)來做一個(gè)類似的動畫。產(chǎn)品提供的截屏視頻如下： 圖1 從這個(gè)視頻里得到的信息，我們可以把動畫分解一下： 321倒計(jì)時(shí)結(jié)束，動畫開始播放。 小河背景向下滾動，看上去小魚在不停的向上游動，其實(shí) 閱讀全文
posted @ 2022-08-12 14:17
nd
閱讀(376)
評論(0)
推薦(0)
摘要：
本文介紹一個(gè)小型動畫庫anime.js，anime.js 是一款功能強(qiáng)大的Javascript 動畫庫插件。anime.js 可以和CSS3 屬性，SVG，DOM 元素和JS 對象一起工作，制作出各種高性能，平滑過渡的動畫效果。 anime.js雖然沒有其他動畫庫功能強(qiáng)大，但是它包含的功完全能夠滿足 閱讀全文
posted @ 2022-08-12 14:16
nd
閱讀(1250)
評論(1)
推薦(0)
摘要：
本文介紹一種12宮格抽獎(jiǎng)，這種抽獎(jiǎng)方式是九宮格抽獎(jiǎng)的演變，只不過開始播放的時(shí)候是隨機(jī)方式，不是順時(shí)針播放了。 1.需求 先看看高保，如下圖1 圖1 用戶點(diǎn)擊"立即抽獎(jiǎng)"后12個(gè)獎(jiǎng)品隨機(jī)高亮 請求接口，待所有產(chǎn)品都高亮后，根據(jù)接口結(jié)果，固定在抽中獎(jiǎng)品上 最后彈出中獎(jiǎng)結(jié)果彈框 2.思路 2.1 高亮 實(shí) 閱讀全文
posted @ 2022-08-12 14:15
nd
閱讀(614)
評論(0)
推薦(0)
摘要：
1. 需求 開寶箱在一些商家營銷活動中也很常見，這個(gè)需求簡單，產(chǎn)品經(jīng)理說就是做個(gè)動畫就好，那我們就可以自由發(fā)揮了。高保圖如下圖1. 圖1 開局一張圖，剩下的全靠自己編了，動作怎么動，先看看UI給的素材，看米下鍋。一張關(guān)閉的箱子圖片，如下圖2 圖2 一張打開的箱子，如下圖3 圖3 一張獎(jiǎng)品背景圖片，是 閱讀全文
posted @ 2022-08-12 14:15
nd
閱讀(1346)
評論(0)
推薦(0)
摘要：
本文介紹九宮格抽獎(jiǎng)功能的實(shí)現(xiàn)。 1.需求 功能很簡單，來看看高保截圖，如下圖1 圖1 需求的功能點(diǎn)如下： 用戶點(diǎn)擊抽獎(jiǎng)，九宮格四周的圖片順時(shí)針依次閃爍，空轉(zhuǎn)幾圈。 請求接口，等接口有返回后最后對應(yīng)的獎(jiǎng)品閃爍，其他獎(jiǎng)品不閃爍。 登錄后，正中間的抽獎(jiǎng)這個(gè)小方格點(diǎn)亮，未登錄是灰色，這一點(diǎn)和抽獎(jiǎng)無關(guān)，本文不 閱讀全文
posted @ 2022-08-12 14:14
nd
閱讀(913)
評論(0)
推薦(0)
摘要：
1. 需求 上次講到lao虎機(jī)抽獎(jiǎng)，通過jquery.animate修改background-prosition-y來修改背景圖片實(shí)現(xiàn)上下滾動動畫，本文介紹一種左右滾動的動畫，原理是一樣的，這里通過修改background-prosition-x來實(shí)現(xiàn)動畫，同時(shí)也要注意獎(jiǎng)品圖片的尺寸問題，這里姑且叫 閱讀全文
posted @ 2022-08-12 14:14
nd
閱讀(1850)
評論(1)
推薦(2)
摘要：
本文介紹一個(gè)lao虎機(jī)抽獎(jiǎng)動畫的實(shí)現(xiàn)，lao虎機(jī)抽獎(jiǎng)在各類商家營銷活動中非常常見，這里主要介紹動畫的實(shí)現(xiàn)過程，其他細(xì)節(jié)不做詳細(xì)分析。 ps：lao虎機(jī)是敏感詞，博客園的富文本和markdown編輯器都限制不允許出現(xiàn)，所以文章中的“老”字用拼音代替。 1. 需求 UI給到的藍(lán)湖如下截圖1 圖1 三欄圖 閱讀全文
posted @ 2022-08-12 14:13
nd
閱讀(277)
評論(0)
推薦(0)
摘要：
1.需求 抽獎(jiǎng)是各類營銷活動中最常見的一種形式，本產(chǎn)品需求大致如下：轉(zhuǎn)盤周圍跑馬燈交替閃爍，點(diǎn)擊抽獎(jiǎng)，大轉(zhuǎn)盤旋轉(zhuǎn)，調(diào)用接口獲取抽獎(jiǎng)結(jié)果，大轉(zhuǎn)盤指針指向?qū)?yīng)的獎(jiǎng)品。高保如下圖1 圖1-高保 2.整體思路 2.1跑馬燈 本需求要求跑馬燈交替閃爍，那四周的跑馬燈就不能是死的圖片了，要用動畫來實(shí)現(xiàn)，并且第奇 閱讀全文
posted @ 2022-08-12 14:12
nd
閱讀(876)
評論(0)
推薦(0)
浙公網(wǎng)安備 33010602011771號