lesson1:引導(dǎo)頁動(dòng)效

時(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ù)覽

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市捅彻,隨后出現(xiàn)的幾起案子组去,更是在濱河造成了極大的恐慌,老刑警劉巖步淹,帶你破解...
    沈念sama閱讀 211,194評(píng)論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件从隆,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡缭裆,警方通過查閱死者的電腦和手機(jī)键闺,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,058評(píng)論 2 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來幼驶,“玉大人艾杏,你說我怎么就攤上這事≈言澹” “怎么了购桑?”我有些...
    開封第一講書人閱讀 156,780評(píng)論 0 346
  • 文/不壞的土叔 我叫張陵,是天一觀的道長氏淑。 經(jīng)常有香客問我勃蜘,道長,這世上最難降的妖魔是什么假残? 我笑而不...
    開封第一講書人閱讀 56,388評(píng)論 1 283
  • 正文 為了忘掉前任缭贡,我火速辦了婚禮,結(jié)果婚禮上辉懒,老公的妹妹穿的比我還像新娘阳惹。我一直安慰自己,他們只是感情好眶俩,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,430評(píng)論 5 384
  • 文/花漫 我一把揭開白布莹汤。 她就那樣靜靜地躺著,像睡著了一般颠印。 火紅的嫁衣襯著肌膚如雪纲岭。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,764評(píng)論 1 290
  • 那天线罕,我揣著相機(jī)與錄音止潮,去河邊找鬼。 笑死钞楼,一個(gè)胖子當(dāng)著我的面吹牛喇闸,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播询件,決...
    沈念sama閱讀 38,907評(píng)論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼仅偎,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了雳殊?” 一聲冷哼從身側(cè)響起橘沥,我...
    開封第一講書人閱讀 37,679評(píng)論 0 266
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎夯秃,沒想到半個(gè)月后座咆,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,122評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡仓洼,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,459評(píng)論 2 325
  • 正文 我和宋清朗相戀三年介陶,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片色建。...
    茶點(diǎn)故事閱讀 38,605評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡哺呜,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出箕戳,到底是詐尸還是另有隱情某残,我是刑警寧澤国撵,帶...
    沈念sama閱讀 34,270評(píng)論 4 329
  • 正文 年R本政府宣布,位于F島的核電站玻墅,受9級(jí)特大地震影響介牙,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜澳厢,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,867評(píng)論 3 312
  • 文/蒙蒙 一环础、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧剩拢,春花似錦线得、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,734評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽厌小。三九已至隙笆,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間漂坏,已是汗流浹背摸屠。 一陣腳步聲響...
    開封第一講書人閱讀 31,961評(píng)論 1 265
  • 我被黑心中介騙來泰國打工谓罗, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人季二。 一個(gè)月前我還...
    沈念sama閱讀 46,297評(píng)論 2 360
  • 正文 我出身青樓檩咱,卻偏偏與公主長得像,于是被迫代替她去往敵國和親胯舷。 傳聞我的和親對(duì)象是個(gè)殘疾皇子刻蚯,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,472評(píng)論 2 348

推薦閱讀更多精彩內(nèi)容

  • 概覽 在iOS中隨處都可以看到絢麗的動(dòng)畫效果,實(shí)現(xiàn)這些動(dòng)畫的過程并不復(fù)雜桑嘶,今天將帶大家一窺iOS動(dòng)畫全貌炊汹。在這里你...
    Yiart閱讀 3,797評(píng)論 3 34
  • 官網(wǎng)中文版 1 簡(jiǎn)易天空替換## 技能:線性擦除,追蹤運(yùn)動(dòng)逃顶,用顏色鍵K出人物讨便,用色彩曲線調(diào)色。(1)天空?qǐng)D片素材放...
    朱細(xì)細(xì)閱讀 10,675評(píng)論 4 82
  • 剛和水水弄了下樓下的插頭废菱,房子裝修這么多細(xì)事,還好有水水,不然我真有的忙殊轴。 今天哥哥去廣州衰倦,而我要管好這家店,我是...
    吉草末閱讀 90評(píng)論 0 0
  • 在網(wǎng)上經(jīng)呈崃荩看到有人曬自己救助了流浪狗耿币、流浪貓梳杏,卻沒見過哪只狗狗和貓貓把自己的食物送給饑寒交迫的同伴韧拒,倒是經(jīng)常看到狗...
    呂艷朋閱讀 1,010評(píng)論 1 50
  • 最近我看到了一個(gè)概念:第一性原理楷掉,個(gè)人覺得很受啟發(fā),我相信只要運(yùn)用得當(dāng)霞势,就能像開了白眼一樣烹植,馬上看到別人看不到的東...
    馮毓閱讀 721評(píng)論 0 3