摘要:
鯉魚跳龍門動畫 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號