整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
TML5在國(guó)內(nèi)一般稱為H5，指的是HTML5網(wǎng)頁(yè)，比如前兩年大火的小游戲《圍住神經(jīng)貓》，就是H5網(wǎng)頁(yè)的一種。近期比較出名還有看看新聞通過(guò)www.ih5.cn制作的H5《和宋仲基結(jié)婚合成器》，一天內(nèi)瀏覽量破250萬(wàn)。
如果細(xì)心地觀察那些閱讀轉(zhuǎn)發(fā)破萬(wàn)的H5，它們除了本身極具特色的創(chuàng)意之外，排版與動(dòng)效功能的應(yīng)用也是恰到好處。
所以今天我們就分別從【動(dòng)效】來(lái)給大家闡釋，如何讓自己創(chuàng)作的H5更具傳播性。
·
如今的消費(fèi)者幾乎手機(jī)不離身，手機(jī)移動(dòng)端H5對(duì)公司宣傳的影響愈加明顯，可移動(dòng)端相對(duì)于PC端與紙媒等其他渠道而言，具有以下幾點(diǎn)特性：
為了大大降低這些特征對(duì)H5內(nèi)容閱讀吸引力的影響，針對(duì)不同的問(wèn)題，我們可以在H5內(nèi)容中添加相對(duì)應(yīng)的動(dòng)效，以達(dá)到優(yōu)化的作用:
1、動(dòng)效的作用
總結(jié)而言，動(dòng)效對(duì)H5頁(yè)面的作用主要體現(xiàn)在兩個(gè)方面，分別為功能性以及趣味性。
功能性：
（1）引導(dǎo)用戶進(jìn)行點(diǎn)擊、翻頁(yè)等動(dòng)作
（2）吸引用戶并讓其做長(zhǎng)時(shí)間的視覺停留；
趣味性：通過(guò)一些充滿趣味的特效，讓用戶的體驗(yàn)變得真正愉快以及難忘。
2、動(dòng)效的類型
在H5內(nèi)容展示中常見的動(dòng)效有：移位、旋轉(zhuǎn)、翻轉(zhuǎn)、縮放、逐楨、淡入淡出、粒子效果、3D等，而我們能大致地將這些動(dòng)效分為基礎(chǔ)特效、招牌特效以及高難度特效三種類別。
（1）基礎(chǔ)動(dòng)效
基礎(chǔ)動(dòng)效分為指向性動(dòng)效和空間展示動(dòng)效，具體表現(xiàn)在：
指向性動(dòng)效——H5元素的出現(xiàn)、滑動(dòng)、彈出等
空間展示動(dòng)效——頁(yè)面的切換、翻動(dòng)和放大。
基礎(chǔ)動(dòng)效最重要的目的是要讓用戶感到毫無(wú)負(fù)擔(dān)，順應(yīng)自然規(guī)律，此類動(dòng)效無(wú)需做到奪人眼球，而是要讓動(dòng)效舒服流暢。
為了能讓大家更直觀地理解基礎(chǔ)特效的效果，不妨來(lái)看看下面這些關(guān)于動(dòng)效設(shè)計(jì)中的物理關(guān)系。
首先，我們要理解“顏色是有重量的”，如下圖所示，隨著明度和飽和度的升高，顏色的重量在下降：
此外，物理規(guī)律也是動(dòng)效考慮的關(guān)鍵因素。看起來(lái)舒服的動(dòng)效，一定是符合真實(shí)物理運(yùn)動(dòng)規(guī)律的，比如小球從上往下掉，加速運(yùn)動(dòng)要比勻速運(yùn)動(dòng)更符合人眼的認(rèn)知。
（2）招牌動(dòng)效
招牌動(dòng)效是基于基本動(dòng)作有選擇性的差異化展現(xiàn)，就像一個(gè)個(gè)有個(gè)性的Pose，讓用戶眼前一亮，建立對(duì)界面的獨(dú)特印象。
這類動(dòng)效目的是主要為了加深用戶印象，但需要注意夸張個(gè)性化的表現(xiàn)，以及對(duì)于動(dòng)效節(jié)奏的把控。
（3）高難度動(dòng)效
高難度動(dòng)效主要的目的是為了加深用戶印象。如果運(yùn)用在H5中會(huì)很酷很炫，可以讓用戶做長(zhǎng)時(shí)間的視覺停留，但是也是起到錦上添花、畫龍點(diǎn)睛的作用，需要根據(jù)切實(shí)需要來(lái)進(jìn)行設(shè)計(jì)。
有時(shí)候大家會(huì)覺得這些酷炫的動(dòng)效很難實(shí)現(xiàn)，其實(shí)如果你仔細(xì)分析，會(huì)發(fā)現(xiàn)他們都是基礎(chǔ)動(dòng)效的排列組合。比如下面這兩個(gè)動(dòng)效，只要拆分成不同的層，就能發(fā)現(xiàn)其中只是不同層之間平移和縮放的組合。
以上，僅是一些制作經(jīng)驗(yàn)和思路分享，不過(guò)具體的情況還得具體分析，排版與動(dòng)效的表現(xiàn)形式錯(cuò)綜復(fù)雜，只有找到合適自己創(chuàng)作風(fēng)格的才能打動(dòng)讀者。
【附：HTML5制作，建議使用www.ih5.cn，國(guó)內(nèi)唯一提供可視化物理引擎、微信付費(fèi)點(diǎn)、微信紅包等功能的H5頁(yè)面制作云服務(wù)平臺(tái)?！?/strong>
言
這是我的第一個(gè)基于Vue項(xiàng)目的作品，目的是把之前的前端知識(shí)累積加上目前流行的前端框架，以項(xiàng)目的形式展示出來(lái)。 大家在學(xué)習(xí)Vue的時(shí)候，可以將此項(xiàng)目作為學(xué)習(xí)Vue框架的一個(gè)模板
效果圖
這個(gè)最后做出來(lái)的效果圖
實(shí)現(xiàn)功能
使用的技術(shù)棧
vue2.0 + vue-router + vue-cli + axios + stylus + flex布局 + es6 + eslint + webpack2 復(fù)制代碼
項(xiàng)目目錄
項(xiàng)目結(jié)構(gòu)
common文件夾存放的是通用的css和fonts componets文件夾用來(lái)存放Vue組件 router文件夾存放Vue組件 build文件是webpack的打包編譯配置文件 config文件夾存放的是一些配置項(xiàng)，比如我們服務(wù)器訪問(wèn)的端口配置等 dist該文件一開始是不存放，在項(xiàng)目經(jīng)過(guò)build之后才會(huì)生成 Prod.server.js該文件是測(cè)試模擬的服務(wù)器配置，用來(lái)運(yùn)行dist里面的文件 config/index.js中，build對(duì)象中添加一條端口設(shè)置port:9000 App.vue根組件，所有的子組件都將在這里被引用 Index.html整個(gè)項(xiàng)目的入口文件，將會(huì)引用我們的根組件App.vue Main.js入口文件的js邏輯，在webpack打包之后將被注入到index.html 復(fù)制代碼
搭建Vue的運(yùn)行環(huán)境
1，首先是安裝node
端開發(fā)框架和環(huán)境都是需要Node.js，先安裝node.js開發(fā)環(huán)境，vue的運(yùn)行是依賴于node的npm的管理工具來(lái)實(shí)現(xiàn)的，下載地址(nodejs.org/en/)
2，查看node的版本號(hào)
下載好node之后，打開cmd管理工具，輸入node -v，回車，查看node版本號(hào)，出現(xiàn)版本號(hào)則說(shuō)明安裝成功
node -v 復(fù)制代碼
3，安裝淘寶npm鏡像
由于npm是國(guó)外的，使用起來(lái)比較慢，這里使用淘寶cnpm鏡像來(lái)安裝vue，淘寶的cnpm命令管理工具可以代替默認(rèn)的npm管理工具
$ npm install -g cnpm --registry=https://registry.npm.taobao.org 復(fù)制代碼
4，安裝全局vue-cli腳手架
淘寶鏡像安裝之后，我們就可以全局vue-cli腳手架，輸入命令:cnpm install -g vue-cli回車；驗(yàn)證是否安裝成功，在命令輸入vue,出來(lái)vue的信息，及說(shuō)明安裝成功
cnpm install -g vue-cli 復(fù)制代碼
5，初始化項(xiàng)目
Vue init webpack demo 復(fù)制代碼
(demo指的是你新建的項(xiàng)目名稱/文件名稱)
6，運(yùn)行項(xiàng)目
npm run dev 復(fù)制代碼
然后就會(huì)出來(lái)http://localhost:8080 把這個(gè)網(wǎng)址復(fù)制到瀏覽器中打開
7，發(fā)布代碼
npm run build 復(fù)制代碼
發(fā)布完代碼后會(huì)生成dist目錄，保存著項(xiàng)目的所有可運(yùn)行的代碼
開發(fā)過(guò)程中重點(diǎn)問(wèn)題總結(jié)
better-scroll
Better-scroll可能是目前最好用的移動(dòng)端滾動(dòng)插件 插件在移動(dòng)端使用時(shí)需要設(shè)置 click：true，否則移動(dòng)端滑動(dòng)無(wú)效
分開設(shè)置css樣式
1，圖標(biāo)icon.css--文字圖標(biāo)樣式，通過(guò)icomoon.io網(wǎng)站，將svg圖片轉(zhuǎn)成文字圖標(biāo)樣式
2，公共base.css--處理設(shè)備像素比的一些樣式，針對(duì)border-1px問(wèn)題，不同設(shè)備像素比，顯示的線條粗細(xì)不同
3，工具mixin.css--設(shè)備border-1px樣式和背景樣式
sticky-footer布局
在這個(gè)項(xiàng)目的header組件的詳情頁(yè)采用stick-footer布局
特點(diǎn)：如果頁(yè)面內(nèi)容不夠長(zhǎng)，頁(yè)腳塊粘貼在視窗底部； 如果內(nèi)容足夠長(zhǎng)，頁(yè)腳塊會(huì)被內(nèi)容向下推送
實(shí)現(xiàn)：父級(jí) position:fixed，內(nèi)容設(shè)為padding-bottom:64px，頁(yè)腳相對(duì)定位，margin-top:-64px，clear:both為了保證兼容性，父級(jí)要清除浮動(dòng)
要求自適應(yīng)布局
1，左側(cè)寬度固定，右側(cè)寬度自適應(yīng)
左側(cè)固定width：80px，右側(cè)自適應(yīng)
parent: display:fiexd; child-left: flex:0 0 80px child-right: flex:1 復(fù)制代碼
2，元素寬度自適應(yīng)設(shè)備寬度，且元素要求等寬高樣式
商品詳情頁(yè)面的商品圖片展示樣式
.img_header {
position:relative
width:100% // width是 設(shè)備寬度
height:0
padding-top:100% // 高度設(shè)為0,使用padding撐開
.img {
position:absolute //定位布局
top:0
left:0
width:100%
height:100%
}
}
復(fù)制代碼
背景模糊效果
filter：blur(10px)
注意，所有在內(nèi)的子元素也會(huì)模糊，包括文字，所以采用定位布局，背景單獨(dú)占用一個(gè)層，ios有一個(gè)設(shè)置backdrop-filter:blur(10px)，只會(huì)模糊背景,但不支持android
transition過(guò)渡
在購(gòu)買控件中使用transition過(guò)渡效果，實(shí)現(xiàn)添加減少按鈕的動(dòng)效，和小球飛入購(gòu)物車的動(dòng)效（模仿貝塞爾曲線的效果）
name-String用于自動(dòng)生成css過(guò)渡類名
name: 'fade' 將自動(dòng)拓展為.fade-enter，.fade-enter-active等。默認(rèn)類名為 "v"
fade-enter fade-enter-active fade-leave fade-leave-active 復(fù)制代碼
seller組件
問(wèn)題一：seller頁(yè)面中商品商家實(shí)景圖片橫向滾動(dòng)
解決方案：每個(gè) li 要 display：inline-block，因?yàn)閣idth不會(huì)自動(dòng)撐開父級(jí)ul，所以需要將計(jì)算后的寬度賦值給ul的width，（每一張圖片的width+margin）*圖片數(shù)量-一個(gè)margin，因?yàn)樽詈笠粡垐D片沒(méi)有margin
同時(shí)new BScroll里面要設(shè)置scrollX: true,eventPassthrough: 'vertical', // 滾動(dòng)方向橫向
問(wèn)題二：打開seller頁(yè)面，無(wú)法滾動(dòng)
問(wèn)題分析：出現(xiàn)這種現(xiàn)象是因?yàn)閎etter-scroll插件是嚴(yán)格基于DOM的，數(shù)據(jù)是采用異步傳輸?shù)?，?yè)面剛打開，DOM并沒(méi)有被渲染，所以，要確保DOM渲染了，才能使用 better-scroll，
解決方案：用到mounted鉤子函數(shù)，同時(shí)必須搭配this.$nextTick()
問(wèn)題三：在seller頁(yè)面，刷新后，無(wú)法滾動(dòng)問(wèn)題分析：出現(xiàn)這種情況是因?yàn)閙ounted函數(shù)在整個(gè)生命周期中只會(huì)只行一次
解決方案：使用watch方法監(jiān)控?cái)?shù)據(jù)變化，并執(zhí)行滾動(dòng)函數(shù) this._initScroll();this._initPicScroll();
緩存數(shù)據(jù)
//將頁(yè)面信息保存到localStorage里
export function saveToLocal(id, key, value) {
let seller=window.localStorage.__seller__;//新定義一個(gè)key值_store_,存放要保存的數(shù)據(jù)對(duì)象
if (!seller) { // 不存在Seller
seller={};
seller[id]={};
} else {
seller=JSON.parse(seller);//string格式-->json格式
if (!seller[id]) {
seller[id]={};
}
}
seller[id][key]=value;
window.localStorage.__seller__=JSON.stringify(seller);//將json格式轉(zhuǎn)成String格式，存放到window.localStorage._store中
};
//將localStorage信息設(shè)置到頁(yè)面中
export function loadFromLocal(id, key, def) {
let seller=window.localStorage.__seller__;
if (!seller) {//開始是沒(méi)有的，因?yàn)闆](méi)有點(diǎn)擊事件，所以顯示默認(rèn)數(shù)據(jù)
return def;
}
seller=JSON.parse(seller)[id];//將json格式-->String格式
if (!seller) {
return def;
}
let ret=seller[key];
return ret || def;
};
復(fù)制代碼
goods,ratings,seller組件之間切換時(shí)會(huì)重新渲染
在 app.vue 內(nèi)使用 keep-alive，保留各組件狀態(tài)，避免重新渲染
<keep-alive> <router-view :seller="seller"></router-view> </keep-alive> 復(fù)制代碼
vue-router
使用<router-link>組件完成導(dǎo)航，<router-link> 默認(rèn)會(huì)被渲染成一個(gè) <a> 標(biāo)簽，但必須使用 to屬性，指定連接
復(fù)制代碼
// app.vue
<!-- 導(dǎo)航 -->
<router-link to="/home">home</router-link>
<router-link to="/about">about</router-link>
<!-- 路由出口 組件渲染容器 -->
<router-view></router-view>
復(fù)制代碼
// router: index.js
import Vue from 'vue';
import Router from 'vue-router';
import goods from 'components/goods/goods.vue';
import ratings from 'components/ratings/ratings.vue';
import seller from 'components/seller/seller.vue';
Vue.use(Router);
const routes=[{
path: '/',
redirect: '/goods'
}, {
path: '/goods',
component: goods
}, {
path: '/ratings',
component: ratings
}, {
path: '/seller',
component: seller
}];
復(fù)制代碼
axios
在vue1.x的時(shí)候，vue的官方推薦HTTP請(qǐng)求工具是vue-resource，但是在vue2.0的時(shí)候?qū)⑼扑]工具改成了axios
組件間通訊
vue是組件式開發(fā)，所以組件間通訊是必不可少的
event bus: 利用一個(gè)中間組件來(lái)作為信息傳遞中介 vuex: 信息樹 復(fù)制代碼
父?jìng)髯? props
子組件定義 props 來(lái)接受父組件傳遞來(lái)的數(shù)據(jù)對(duì)象
// 父組件
<v-header :seller="seller"></v-header>
// 子組件 header.vue
props: {
seller: {
type: Object
}
}
復(fù)制代碼
子傳父: $emit
如果是子組件想傳遞數(shù)據(jù)給父組件，需要派發(fā)自定義事件，使用 $emit 派發(fā)
父組件使用v-on接收監(jiān)控（v-on可以簡(jiǎn)寫成@）
// 子組件 ratingSelect.vue，派發(fā)自定義事件select，將type數(shù)據(jù)傳給父級(jí)
this.$emit('select', type);
this.$emit('toggle', this.onlyContent2);
// 父組件 food.vue 在子組件的模板標(biāo)簽里，使用v-on監(jiān)控toggleContent傳過(guò)來(lái)的數(shù)據(jù)
<ratingselect @select="selectRating" @toggle="toggleContent"></ratingselect>
復(fù)制代碼
非父子組件之間通信
1，大型項(xiàng)目可以用 Vue官方推薦的vuex
2，EventBus
3，子組件A $emit 派發(fā)具體事件，由父組件 @ 監(jiān)聽得到數(shù)據(jù)
父組件再利用 $refs 直接訪問(wèn)子組件B的方法，間接實(shí)現(xiàn)數(shù)據(jù)從子組件A傳遞至子組件B
組件提取管理
將相同樣式或功能的區(qū)塊單獨(dú)提出來(lái)，作為一個(gè)組件。 另外組件中用到的圖片等資源就近維護(hù)，即可以考慮在組件文件夾中新建images文件夾。
抽離組件遵循原則： 要盡量遵循單一職責(zé)原則，復(fù)用性更高，不要設(shè)置額外的margin等影響布局的東西
打開app應(yīng)用，默認(rèn)顯示 goods 頁(yè)面內(nèi)容
想默認(rèn)顯示goods頁(yè)面內(nèi)容，有兩種方法，一種是利用重定向，另一種是利用vue-router的導(dǎo)航式編程
1，重定向
routes: [
{
path: '/',
redirect: '/goods' //重定向
},
{
path: '/goods',
name: 'goods',
component: goods
},{
path: '/ratings',
name: 'ratings',
component: ratings
},{
path: '/seller',
name: 'seller',
component: seller
}
]
復(fù)制代碼
2，導(dǎo)航式編程
router.push('/Goods');
復(fù)制代碼
關(guān)于ESlint
eslint 是一個(gè)js代碼風(fēng)格檢查器，配合vue-cli腳手架中的熱更新，可以很方便的定位和提示錯(cuò)誤。在公司多人協(xié)作開發(fā)時(shí)可以確保代碼風(fēng)格保持一致，可以很方便的閱讀他人的代碼
手機(jī)訪問(wèn)項(xiàng)目
1、在config文件夾中的index.js中的host選項(xiàng)，將本地localhost改為0.0.0.0
2、在cmd中輸入ipconfig查看本地IP,
3、在瀏覽器中輸入IP地址
4、端口號(hào)訪問(wèn)(http://192.168.0.110:8080),將這個(gè)網(wǎng)址復(fù)制到網(wǎng)頁(yè)版“草料二維碼”中，用QQ掃碼訪問(wèn)即可
者按：今天@不到布同學(xué)分享一款特別方便的神器，操作過(guò)程易學(xué)好懂，基本上可以解決現(xiàn)有所有的CSS動(dòng)畫需求，有具體的教程呦，趕緊給自己補(bǔ)上這課吧。
@不到布：自從CSS3引入了動(dòng)畫（transition和@keyframes，還有與之搭配的transform）之后，各路人馬對(duì)它的熱情都極為高漲，和JS動(dòng)畫相比，它寫起來(lái)更簡(jiǎn)單（在沒(méi)有jQuery庫(kù)的情況下），同時(shí)在大多數(shù)情況下性能上也有很強(qiáng)的優(yōu)勢(shì)。transition和transform相對(duì)比較簡(jiǎn)單，除了矩陣變換（一般人也用不到）之外，別的都易學(xué)好懂，而使用了@keyframes的動(dòng)畫，簡(jiǎn)直就是設(shè)計(jì)師和工程師的大殺器，關(guān)于這東西有多殺，可以參考之前騰訊的大神們搞的一個(gè)CSS3動(dòng)畫幀數(shù)科學(xué)計(jì)算法（http://tid.tenpay.com）這樣的玩意兒，內(nèi)含計(jì)算器（http://tid.tenpay.com）一枚，內(nèi)文之糾結(jié)復(fù)雜，我相信一般兼職半個(gè)前端的大設(shè)計(jì)或者初入行的小前端都是難以看懂的…
而且其實(shí)主要問(wèn)題是，那玩意兒是為步進(jìn)動(dòng)畫準(zhǔn)備的，做一張精靈圖，然后每隔一定時(shí)間跳一張…其實(shí)這樣算不上一個(gè)真正的css動(dòng)畫，何況animation屬性中的steps()功能可以比較好地解決這個(gè)問(wèn)題。而一直以來(lái)，都沒(méi)有一個(gè)好的css動(dòng)畫生成工具（別跟我提Muse，它需要閱讀《工具的自我修養(yǎng)》…）所以今天我想推薦的就是這個(gè)Stylie（http://jeremyckahn），一個(gè)可視化自動(dòng)生成CSS3動(dòng)畫的工具。
Stylie操作簡(jiǎn)介
頁(yè)面打開以后很簡(jiǎn)單，藍(lán)色的網(wǎng)格背景上面，兩個(gè)綠色的十字中間連著一根黃色的線，上面有一個(gè)白色小球不斷地從左邊滑動(dòng)到右邊（還稱不上滾動(dòng)），下面有一個(gè)進(jìn)度條，右邊有一個(gè)操作面板。
圖片來(lái)自Tuts+
Keyframes標(biāo)簽面板
第一個(gè)0ms處表示起點(diǎn)相關(guān)信息，第二個(gè)2000ms處表示2000ms處斷點(diǎn)的相關(guān)信息；
2000ms可以單擊修改它的時(shí)間，單擊右上角的加號(hào)可以添加新的斷點(diǎn)
X和Y分別表示橫坐標(biāo)及縱坐標(biāo)（其實(shí)你也可以用鼠標(biāo)去拖綠色的十字…）；
S表示縮放倍率（默認(rèn)是1）；
rX、rY、rZ分別表示物體沿X、Y、Z軸的旋轉(zhuǎn)角度（具體哪個(gè)軸是哪個(gè)可以在上面填寫數(shù)字自己嘗試，出于便于觀察的理由建議填寫180。當(dāng)然你也可以按住Shift鍵，拖，但是我覺得這樣很不好控制…）；
linear表示線性的…這一欄是自定義緩動(dòng)曲線（Easing curves）
緩動(dòng)曲線
這個(gè)工具比較流弊刷刷的一點(diǎn)就在于它的緩動(dòng)曲線功能，所有的數(shù)值，都！可！以！定義緩動(dòng)。下面我稍微說(shuō)一下它的緩動(dòng)：
In和Out分別代表進(jìn)入時(shí)和結(jié)束時(shí)，緩動(dòng)顧名思義就是有一個(gè)類似“緩沖”的動(dòng)作，如同汽車加速是慢慢加起來(lái)的，人跑步也是慢慢停下的（急剎車也是很難從高速直接降速到靜止的，總有個(gè)減速的過(guò)程）。
Quad – x^2（二次方曲線）
Cubic – x^3（三次方曲線）
Quart – x^4（四次方曲線）
Quint – x^5（五次方曲線）
Sine – sin(x^(pi/2))（長(zhǎng)相有點(diǎn)像二次方曲線，實(shí)際上這個(gè)函數(shù)很奇葩，有興趣的童鞋可以移步這里（http://t.cn/RhdkXQC）看一下[0,3]的圖像…）
Expo – 2^(10(x-1))（我放棄起名字了，總之是一個(gè)開始非常非常慢，中后期非常非?？斓臇|西）
Circ – 顧名思義就是?。?/4圓，如果選擇了InOut就是兩個(gè)外切的1/4圓）
Bounce – 公式太長(zhǎng)不寫了，就是個(gè)反彈曲線（彈簧效果、小球落地）
v10. Back -反彈曲線
elastic – 橡皮筋曲線（有一個(gè)非常短暫且巨大的晃動(dòng)，然后緩緩結(jié)束）
swing – 跟Back系列一樣
后面的就沒(méi)什么了，最后一個(gè)為CustomEasing，這個(gè)曲線可以自己在Motion選項(xiàng)卡中編輯，經(jīng)常用AI的童鞋可能比較容易編輯，但是不理解曲線跟運(yùn)動(dòng)速度之間的關(guān)系的話，就根本搞不懂自己在編輯什么…
上面說(shuō)了那么多曲線…它其實(shí)代表的就是一個(gè)速率的變化（可以把起點(diǎn)和終點(diǎn)放在非水平或垂直的同一條直線位置上，然后改變X和Y的Easing Curves，本質(zhì)上它和我們初高中物理課上畫的那些撞車線拋物線沒(méi)什么不同…）。對(duì)于那些想預(yù)覽簡(jiǎn)單微小動(dòng)效的人來(lái)說(shuō)，可以把起點(diǎn)和終點(diǎn)放在比較近的位置上，然后改變Easing curves察看效果。
導(dǎo)出代碼
效果滿意之后，就可以點(diǎn)擊CSS和HTML標(biāo)簽分別復(fù)制代碼了。
CSS標(biāo)簽中可以為這個(gè)動(dòng)畫自定義名字，并選擇瀏覽器兼容性（默認(rèn)為W3C，如果你家要考慮兼容其實(shí)還不如不要做（對(duì)我說(shuō)的就是那誰(shuí)，你們懂）…兼容手機(jī)的話可以考慮勾上Webkit）。Orient generated CSS to的意思是說(shuō)所有的位移數(shù)據(jù)采用相對(duì)（第一幀的）位移，還是絕對(duì)定位（相對(duì)于左上角）。最下面的滑塊，最左邊是最少代碼，右邊是最高質(zhì)量，最小代碼可能會(huì)在某些情況下引發(fā)意想不到的問(wèn)題，但是通常情況下沒(méi)啥事…
HTML標(biāo)簽就沒(méi)啥東西了，你可以修改其中的html代碼來(lái)查看你自定義的內(nèi)容效果（默認(rèn)只有一個(gè)圖片，就是那個(gè)白色的圓…）
最后在右邊的扳手標(biāo)簽里，你可以選擇保存或讀取你的動(dòng)畫。
差不多就是這樣了，這個(gè)神器基本上可以解決現(xiàn)有所有的CSS動(dòng)畫需求，具體怎么做就看各人的實(shí)力（yun qi) 了。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
