html5+css3之动漫在webapp中的运用

日期:2020-12-12 类型:科技新闻 

关键词:小程序 活动,微信小程序demo,微信小程序游戏开发价格,手机小程序怎么做,视频播放微信小程序

动漫在webapp的现况

webapp方式的网站追求完美的便是1个人验,是HTML5&CSS3浪潮下的物质,抛开体验不说,webapp方式门坎较为高;

而体验提升的1个关键就是动漫,能够说动漫是webapp的1个亮点。但也是1个难点,1个痛点,关键缘故是:挪动端手机上的碎片化比较严重。

机器设备、型号规格、版本号、辨别率等差别致使挪动端必须考虑到的流行状况达10多种多样,而Hybrid带来的webview可让状况更为不尽人意

因此说,近两年想在挪动端大范畴的应用动漫,或应用webapp方式都对精英团队的工作能力提出了规定,缘故是:

① 单页对自变量污染更为比较敏感

这个自变量污染包含js自变量污染,css自变量污染,尽管js可选用AMD控制模块清除关键难题,但css的污染却很难防止,有时愈甚于js

web Component是1个处理计划方案,但还害怕大范畴应用,由于1次UI的更改会致使各个业务流程精英团队更改,这个成本沒有颠复性的优点,因小失大。

② heap值爬升

假如view的管理方法沒有1个合理的消毁体制,那末webapp方式的网站不能防止的会耗费更多的运行内存,乃至减少体验,费劲不取悦

③ 手机上烂,CPU烂,国产访问器多而烂,擅自调剂webkit核心而引起的难题数不胜数,奇葩访问器甚么的就不提了

因此动漫在webapp或说在挪动端应用有其情景,他可用于小范畴的动漫,可用于view内级別的动漫,例如弹出层的动漫,细节处的动漫

不可用于网页页面级別的切换,例如全部view的切换(大家看到的native中的过场动漫),view级別动漫的痛点是:手机上碎片化

而view级別动漫的难点是:

① view级別的动漫不可以意料dom树的尺寸,大dom树的动漫cpu吃未消

② 过场动漫不可以同用window.scollTop,各个View必须维护保养自身的翻转条,而地区翻转是挪动端另外一个痛点

以上是挪动端现况,技术性虽好,有其情景。能够在高档机上应用全局性性的动漫,可是架构层面1定要出示电源开关体制,低端机卡帧常常产生,确保低端机的基础作用

接下来详细介绍1下CSS3的动漫......

CSS3的动漫

transition

拷贝编码
编码以下:

PS:自然,上面4个特性能够像border1样写到1堆


拷贝编码
编码以下:

.demo {
transition: border 2s ease 2s;
}

这段编码便是告知访问器每当border产生转变时,请在两秒后开启,而且在两秒内进行

这里举1个典型的小事例做表明:


拷贝编码
编码以下:

<!doctype html>
<html>
<head>
<meta charset="utf⑻" />
<title>Blade Demo</title>
<style type="text/css">
* { margin: 0 0; padding: 0 0; }
h1 { font-size: 16px; font-family: "Helvetica Neue", Helvetica, STHeiTi, Arial, sans-serif;}
.cm-header { top: 0; height: 44px; line-height: 44px; text-align: center; background-color: #099fde; color: #fff; z-index: 960; }
.title::after { content: ""; display: inline-block; vertical-align: middle; width: 6px; height: 6px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; display: inline-block; margin-left: 5px; vertical-align: middle; position: relative; top: ⑷px; -webkit-transition: all 0.3s ease-in-out; }
.up::after { -webkit-transform: rotate(135deg); top: 1px; }
.down::after { -webkit-transform: rotate(⑷5deg); top: ⑷px; }
</style>
</head>
<body>
<header class="cm-header">
<h1 class="title up" id="title">
点一下我</h1>
</header>
<script type="text/javascript">
var el = $('#title');
el.on('click', function () {
if (el.hasClass('up')) {
el.removeClass('up');
el.addClass('down');
} else if (el.hasClass('down')) {
el.removeClass('down');
el.addClass('up');
}
});
</script>
</body>
</html>

简易的动漫应用transition,繁杂的动漫便要应用animation了;或说必须从1个情况到另外一个情况的话,最好是应用animation


拷贝编码
编码以下:

animation
animation-name 针对keyframe的名字
animation-duration 动漫花销時间
animation-timing-function 动漫曲线图
animation-delay 延迟时间是多少毫秒a实行
animation-iteration-count 实行次数
animation-direction 是不是反向播发

大家1般应用前4个主要参数,这里的应用必须先建立keyframe标准,这里先来1个简易的事例:


拷贝编码
编码以下:

<html>
<head>
<meta charset="utf⑻" />
<title>Blade Demo</title>
<style type="text/css">
@-webkit-keyframes demoFrame {
from { left: 0; }
to { left: 100px; }
}
div { width: 100px; top: 100px; height: 100px; background: gray; position: absolute; }
.demo { -webkit-animation: demoFrame 1s ; }
</style>
<script id="others_zepto_10rc1" type="text/javascript" class="library" src="/js/sandbox/other/zepto.min.js"></script>
</head>
<body>
<div id="demo">
</div>
<input type="button" value="点一下我刚开始动漫" id="btn">
<script>
var el = $('#demo');
var btn = $('#btn');
el.on('webkitAnimationEnd', function () {
el.removeClass('demo');
});
btn.on('click', function() {
el.addClass('demo');
});
</script>
</body>
</html>

每次实行了动漫逻辑性后必须移除class做到重设实际效果,animationEnd就是对应回调函数,对应transition也是有1个transitionEnd回调函数会在动漫后开启,有时候不灵就选用setTimeout吧。

这里举1个更为可用于新项目的事例:


拷贝编码
编码以下:

<html>
<head>
<meta charset="utf⑻" />
<title>Blade Demo</title>
<style type="text/css">
@-webkit-keyframes itemFrame {
from { -webkit-transform: translateY(⑻0px); }
to { -webkit-transform: translate(0); }
}
* { margin: 0; padding: 0; }
#demo li { list-style: none; border: 1px solid black; margin: 10px; padding: 10px; }
.animateItem { -webkit-animation: itemFrame 1s ; }</p> <p> </style>
<script id="others_zepto_10rc1" type="text/javascript" class="library" src="<a href="http://sandbox.runjs.cn/js/sandbox/other/zepto.min.js"></script">http://sandbox.runjs.cn/js/sandbox/other/zepto.min.js"></script</a>>
</head>
<body>
<ul id="demo">
</ul>
<script>
var el = $('#demo');
for(var i = 0; i < 10; i++) {
var li = $('<li>新项目_' + i);
el.append(li);
}
var items = $('#demo li');</p> <p> function animatFn() {
$.each(items, function (i) {
var el = $(this);
el.css('-webkit-animation-delay', i * 50 + 'ms');
el.addClass('animateItem');
})
}</p> <p> items.on('webkitAnimationEnd', function () {
items.removeClass('animateItem');
items.css('-webkit-animation-delay', '');
});</p> <p> animatFn();</p> <p> setInterval(function () {
animatFn();
}, 3000)</p> <p></script>
</body>
</html>

这是1个list网页页面的經典实际效果,做得好会令人眼下1亮,自然做得不太好也会令人头疼,这里以便实际效果便编码上循环系统了下,这里有1个专业知识点要说下:


拷贝编码
编码以下:
访问器的dom实际操作与网页页面3D渲染时互斥的

以编码为例:


拷贝编码
编码以下:

$.each(items, function (i) {
var el = $(this);
el.css('-webkit-animation-delay', i * 50 + 'ms');
el.addClass('animateItem');
})

客观事实上每次循环系统皆将class与css特性同歩设定到了dom上但沒有实行动漫,而是全部dom实际操作实行完毕后才实行的,假如这里编码添加時间片便不1样了

这样的话1次循环系统会立刻实行,接着会实行在其中的1个个setTimeout的编码,还可以看到setTimeout之间的时钟频率不大好被确保,例如item有100项


拷贝编码
编码以下:

function animatFn() {
$.each(items, function (i) {
setTimeout($.proxy(function () {
var el = $(this);
el.addClass('animateItem');
}, this), 300 * i);
})
}

更繁杂的实际效果,例如仿真模拟qq的网页页面转场动漫,就要与技术专业的重构朋友上场了,能够看这个编码:

https://github.com/yexiaochai/cssui/tree/gh-pages

demo详细地址:http://yexiaochai.github.io/cssui/demo/debug.html#a

结语

初学重构,假如文中有为何不足,请您留言