時(shí)間真的很不夠用安 T焖浮否过!當(dāng)你很認(rèn)真做一件事的時(shí)候午笛,你會(huì)發(fā)現(xiàn)時(shí)間真的很少很少!C绻稹药磺!第一次使用flinto制作引導(dǎo)頁動(dòng)效。記錄下幾個(gè)要點(diǎn):
Flinto的特點(diǎn)
一:可以做左右翻轉(zhuǎn)煤伟,開門效果癌佩,左拉右拉等動(dòng)畫效果木缝;
二:支持手勢(shì)操作,實(shí)時(shí)預(yù)覽围辙,查看交互效果我碟;
三:支持sketch文件導(dǎo)入,可以做一個(gè)項(xiàng)目的整個(gè)交互效果姚建;
Affinity Designer軟件可以相互轉(zhuǎn)換
包括的文件格式:PNG矫俺,GIF,ITFF掸冤,PSD厘托,PDF,SVG稿湿,EPS
繪制鏈接(相當(dāng)于觸發(fā)區(qū)域)铅匹,是透明的;
flinto做動(dòng)畫只能兩個(gè)圖層為一組饺藤,一起做動(dòng)畫包斑,并且是相反的;
新建動(dòng)效里面涕俗,開始和結(jié)束舰始,“開始”是結(jié)束屏幕的動(dòng)效,“結(jié)束”是開始屏幕的動(dòng)效咽袜;
屬性調(diào)整包括:坐標(biāo)丸卷、尺寸、旋轉(zhuǎn)询刹、彈性函數(shù)(張力谜嫉、摩擦、速率)
兩個(gè)屏幕之間會(huì)有自動(dòng)吸附的功能
快捷鍵的使用:
1.shift+空格鍵:播放慢性動(dòng)畫凹联;
2.f:新建鏈接沐兰;
3.d:繪制圖層鏈接;
4.command+t: 編輯過渡效果蔽挠;
5.選中一個(gè)圖層+b:創(chuàng)建反向鏈接住闯;
6.command+圖層:隔選圖層;
7.command+p:預(yù)覽(整個(gè)交互動(dòng)畫)澳淑;
8.command+shift+p:預(yù)覽(當(dāng)前畫板)比原;
9.command+option+g:創(chuàng)建滾動(dòng)組;
7.回車:確定杠巡;
8.command+g:編組量窘;
9.command+shift+g:解組氢拥;
10.command+r:重命名蚌铜;
11.數(shù)值區(qū)域接受簡(jiǎn)單的數(shù)學(xué)運(yùn)算輸入锨侯,“+”、“-”冬殃、“*”囚痴、“/”;
12.option+圖層审葬,移動(dòng)渡讼,復(fù)制圖層;
13.command+b:創(chuàng)建微交互耳璧;
圖層移動(dòng)
1.command+option+△:上移一層成箫;
2.command+option+▽:下移一層;
3.command+option+control+△:移到同一層級(jí)的最上面旨枯;
4.command+option+control+▽:移到統(tǒng)一層級(jí)的最下面蹬昌;
添加鏈接
1.創(chuàng)建鏈接
某一個(gè)圖層或者元素,針對(duì)具體的
2.繪制鏈接
繪制鏈接主要是針對(duì)某一塊區(qū)域攀隔,可以手動(dòng)繪制觸發(fā)區(qū)域
3.添加定時(shí)器鏈接
(1s(秒)=1000(ms)毫秒)
添加定時(shí)器鏈接一般用于啟動(dòng)頁過渡到首頁皂贩,不需要用戶手動(dòng)操作到新頁面的頁面,或者是廣告banner昆汹,自動(dòng)滑動(dòng)到下一個(gè)廣告明刷;
特殊說明:
1.忽略歷史記錄(Ignore History)
這個(gè)功能主要是返回上一步的時(shí)候能夠保留已經(jīng)操作過的行為,比如當(dāng)前頁面收藏按鈕满粗,點(diǎn)了紅色辈末,如果返回連接的話,會(huì)返回到?jīng)]有收藏的情況
2.反向過渡(Reverse Transition)
3.防止過沖(Prevent Overshoot)
4.添加音效(Add Sound)
5.跳過動(dòng)畫(Skip Animation)
新建動(dòng)畫的步驟:
1.繪制鏈接
2.添加手勢(shì)
3.新建過渡(是兩個(gè)頁面的過渡效果映皆,有默認(rèn)的幾種狀態(tài)挤聘,也可以自己新建)
4.保存和預(yù)覽