国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

本篇教程將展示如何使用Axure制作一個(gè)登錄頁(yè)轉(zhuǎn)場(chǎng)特效 O(∩_∩)O

一、最終效果

二、知識(shí)點(diǎn)

• 尺寸
• 移動(dòng)
• 等待

三、制作過(guò)程

首先我們?cè)陧?yè)面中繪制一個(gè)按鈕，用于設(shè)置點(diǎn)擊觸發(fā)效果：

我們先構(gòu)思了一下動(dòng)畫(huà)的效果，點(diǎn)擊按鈕，按鈕水平伸展至指定寬度，然后開(kāi)始縱向伸展至指定寬度，創(chuàng)建一種按鈕放大鋪滿整個(gè)頁(yè)面的效果。

首先，我們給該按鈕定義名稱為“主按鈕”，“Login with Facebook”字樣定義名稱為“Login with Facebook”。

下一步，我們開(kāi)始設(shè)置這個(gè)按鈕的動(dòng)作，選擇“主按鈕”，在交互面板，雙擊“當(dāng)鼠標(biāo)單擊”打開(kāi)用例面板：

第一步：我們來(lái)完成按鈕背景水平伸展的設(shè)置，在Case 1下點(diǎn)擊動(dòng)作欄中的“尺寸”，在“配置動(dòng)作”頁(yè)面勾選“按鈕背景”，并且把尺寸設(shè)置為375 x 40，錨點(diǎn)選擇“中心”，動(dòng)畫(huà)選擇“線性”，時(shí)間為100毫秒。

第二步：我們來(lái)完成按鈕背景垂直伸展的設(shè)置，在Case 1下點(diǎn)擊動(dòng)作欄中的“尺寸”，在“配置動(dòng)作”頁(yè)面勾選“按鈕背景”，并且把尺寸設(shè)置為375 x 667，錨點(diǎn)選擇“中心”，動(dòng)畫(huà)選擇“線性”，時(shí)間為300毫秒。

第三步：我們將“Login with Facebook”字樣設(shè)置為透明，不透明值設(shè)置為0。

第四步：我們添加一個(gè)“等待”動(dòng)作，為了在下一個(gè)動(dòng)作之前等待450毫秒再進(jìn)行。

至此，我們完成了剛剛說(shuō)到的點(diǎn)擊按鈕后，藍(lán)色背景平鋪滿整個(gè)屏幕的特效。

下一步，我們完成第二個(gè)場(chǎng)景的內(nèi)容顯示。我們看一下，下一個(gè)場(chǎng)景中顯示的內(nèi)容，主要分為3部分。

為了實(shí)現(xiàn)，3部分內(nèi)容的依次顯示的特效，我們?yōu)樗麄兌紕?chuàng)建的，透明度從0到100的設(shè)置，以及使用“移動(dòng)”來(lái)設(shè)置動(dòng)畫(huà)。

這里我們以“返回”為例進(jìn)行講解：

第一步：設(shè)置“顯示”動(dòng)作，動(dòng)畫(huà)類型為“逐漸”，時(shí)間200毫秒。

第二步：設(shè)置“移動(dòng)”動(dòng)作，選擇相對(duì)位置，X：-40 / Y：0

第三步：我們添加一個(gè)“等待”動(dòng)作，設(shè)置值為200毫秒，作用是等待200毫秒后，進(jìn)行下一個(gè)動(dòng)作。

以上設(shè)置完成后，我們可以實(shí)現(xiàn)，點(diǎn)擊按鈕，藍(lán)色平鋪，依次顯示內(nèi)容的特效。

最后，我們還需要新增一個(gè)返回主頁(yè)面的特效：

我們選擇“向左”的箭頭，雙擊“當(dāng)鼠標(biāo)點(diǎn)擊”，為他添加一個(gè)“隱藏”的動(dòng)作，目的是為了點(diǎn)擊返回后，我們將該頁(yè)面的3個(gè)元素先隱藏，然后再實(shí)現(xiàn)藍(lán)色背景收縮的動(dòng)效。

然后我們按照教程最先介紹的，按鈕背景平鋪整個(gè)畫(huà)面的方法，反著設(shè)置一次，即可生成收縮的特效。

完成以后，我們按“F5”進(jìn)行預(yù)覽，即可看到本次教程設(shè)置的所有特效。

下載地址

https://pan.baidu.com/s/1fJevlttLbTJcZG_XefUrsA

作者：ZQZ原型師，專注原型設(shè)計(jì)/交互設(shè)計(jì)

本文由 @ZQZ原型師 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自作者。