整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
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小时内与您取得联系。
