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