整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

canvas结合三角函数实现一个视频直播效果

canvas结合三角函数实现一个视频直播效果

anvas可以说是html5其中的一大亮点,有了它,我们可以基于canvas画布实现很多之前只有flash和视频才能实现的效果。废话少说,先上效果。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=750, user-scalable=no">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>canvas结合三角函数实现一个视频直播效果</title>
 <style lang="">
 * {
 margin: 0;
 padding: 0;
 }
 html,
 body {
 font-size: 0;
 height: 100%;
 }
 canvas {
 background: #000;
 }
 </style>
</head>
<body>
 <canvas id='canvas'></canvas>
 <script>
 (function (document) {
 class Point {
 constructor(option) {
 this.x=option.context.canvas.width / 1.5;//对象的X坐标
 this.y=Math.random() * option.context.canvas.height/2 + option.context.canvas.height / 2 ;//对象的Y坐标
 this.defaultX=this.x;
 this.defaultY=this.y;
 this.img=option.img;
 this.angle=Math.random()*360 | 0;
 this.context=option.context;
 this.width=this.context.canvas.width;
 this.height=this.context.canvas.height;
 this.speedX=0;//元素在x轴上的速度,下面要通过三角函数来实现。
 this.speedY=-4* Math.random() - 8;
 this.alpha=1;
 this.render();
 }
 render() {
 var {
 context,
 img,
 x,
 y
 }=this;
 context.save();
 context.globalAlpha=this.alpha ;
 context.drawImage(img, x, y,img.width/2,img.height/2);
 context.restore();
 }
 animate() {
 this.angle +=3;
 this.angle %=360;
 this.speedX=4* Math.sin(this.angle/180*Math.PI*2);
 this.x +=this.speedX;
 this.y +=this.speedY;
 var {width,height}=this;
 this.alpha=this.y / height / 2 + .2;
 if (Math.abs(this.y <=height / 2)) {
 this.y=height;
 this.angle=Math.random() * 360 | 0;
 this.alpha=1;
 this.x=this.defaultX;
 
 }
 this.render();
 }
 
 }
 var zmitiUtil={
 viewW: window.innerWidth,
 viewH: window.innerHeight,
 init() {
 this.setSize();
 this.createParticals();
 this.animate();
 },
 setSize() {
 this.canvas=document.querySelector('#canvas');
 this.context=this.canvas.getContext('2d');
 this.canvas.width=this.viewW;
 this.canvas.height=this.viewH;
 },
 createParticals(){
 this.particals=[];
 var img=new Image();
 var self=this;
 img.onload=function(){
 var _this=this;//这里面this指向的是img对象
 for (var i=0; i < 30; i++) {
 self.particals.push(new Point({
 img: _this,
 context: self.context
 }))
 }
 }
 img.src='./images/heart.png';
 
 },
 animate(){
 var _this=this;
 (function render(){//这里面this 发生了变化,请注意哦,因为出现了function 哦
 requestAnimationFrame(render);

 _this.context.clearRect(0,0,_this.viewW,_this.viewH);
 _this.particals.forEach(partical=> {
 partical.animate();
 })
 })();
 }
 };
 zmitiUtil.init();
 })(document);
 </script>
</body>
</html>

技术总结:

先来简单回顾下高中的正弦曲线

  1. 我们会发现,图中的曲线和我们的效果是反着来的,所以我们要把x,y对应的调换下位置即可,运动起来就会在X轴的速度上体现出来了。具体可参考下源代码。
  2. 简单的解释下 this.speedX=4* Math.sin(this.angle/180*Math.PI); this.angle为当前的角度,取值范围为:[0,360],js提供的三角函数是要接收一下弧度的,所以我们需要转一下。
  3. 解释 this.angle=Math.random() * 360 | 0; // 有的可能不太知道后面的 ”| 0“是什么意思,本屌之前也不知道是什么意思,自己试,多试几次,于是就知道了,这个是去掉了小数的部分,相当于 Math.floor() , 但要问这是什么原理,好像是二进制的算法,其实我也不知道,但我知道这个用法就行了。
  4. 注意下这个代码里在的有几个地方涉及到了this的指向问题哦。我在代码中已有注释。
  5. 像这种粒子动画的实现原理,先实现一个粒子的动画,然后循环生成一堆,把所有的push到一个数组中去。然后用动画函数遍历数组,执行数组中的每一个对象的运动函数。
  6. html5 canvas 画布一是无状态的机制。像类似 context 的 globalAlpha,translate,rotate等一些属性在操作之前需要加上context.save();在后面再context.restore();代码中也有体现。如果我们不加上context.save()那么,会给所有的粒子都设置了相同的透明试,这可不是我想要的。
  7. ES6的类的创建,解构赋值。

写在最后:

我们可以看到很漂亮的数学曲线,应用到web页面上,充分体现出了数学之美。希望大家在学习上遇到一些自己不懂的写法,一定要自己先去尝试,一定要自己尝试,还要要想尽办法应该到你们的项目中,这样我们印象才深刻。

节主要简单讲解canvas、svg、地理定位和新语义元素

HTML 5 Canvas

canvas 元素用于在网页上绘制图形。HTML5 的 canvas 元素使JavaScript 在网页上绘制图像。画布是一个矩形区域,您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

<canvas id="myCanvas" width="200" height="100"></canvas>

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成:

<script type="text/javascript">

var c=document.getElementById("myCanvas");

var cxt=c.getContext("2d");返回一个用于在画布上绘图的环境,目前仅支持2d,

cxt.fillStyle="#FF0000";//染成红色

cxt.fillRect(0,0,150,75);//fillRect 方法规定了形状、位置和尺寸

</script>

什么苹果发布会经常让人为之疯狂?演讲人的口才固然重要,可好马还需配好鞍,展示设计也是关键。

苹果多年来一直用基本一模一样的Keynote模板做Pre(展示),前几天的2016年春季苹果发布会上,大屏幕的演示格调并没有多大变化——深色渐变底加白字、聚焦式的动画。不复杂,但依然富有魅力。

在此通过3种简单的动态特效(而且每个人都可以轻易学会),来探索设计多媒体交互,能为展示带来什么样的神奇效果。

.

1、延时,60秒做出生长的效果

如果你准备发布Apple Watch,如何在5秒内立刻抓住人们的眼球?一个简单却实用的方法是让产品细节分步呈现出来,形成组装产品的生长效果。

大部分产品有PSD格式的原型图,设计精美但细节繁多,导入PPT等软件进行动效处理十分麻烦。如上图,利用iH5本周发布的新功能,能在保留所有分层结构的前提下一次性导入PSD,快速制造延时的动效。

把PSD文件拖拽到编辑器进行上传,再为产品的部件分别添加飞入、弹跳等动效、设置动效在不同时间出现,就能模拟出产品的“生长情况”。

KEY#1:动效的延迟一开始可以控制在1-3秒,后面的间隔越来越短(并低于动效时长),还能形成重叠的动感,有利于制造现场的张紧感。

.

2、聚焦,Duang一样的特技

“怎么让观众把注意力集中到我想要让他们看的地方?”聚焦有两个技巧,一是把你想要突出的内容放大,二是隐藏不重要的内容。

著名的展示工具Prezi用的就是第一个法子,实时放大展示重点。但它应用还不广,每到一个地方得重装一次,功能也比较有限。如上图,iH5上周推出的画布工具,有用来设计好玩的“聚焦”特技的遮罩功能,能在普通浏览器中进行在线展示。

在画布下放两张图片,一张展示图,一张PNG格式的白色苹果LOGO,把展示图的遮罩设为苹果LOGO,就有上图的效果。容易吧?如果再为图片放一个向左滑动的效果,还能制造漂移的动感。

KEY#2:画布的遮罩效果和设为遮罩的图片息息相关,作为遮罩的图片色彩越明亮,被遮的图片越不透明。

因为作为遮罩的苹果LOGO是全白的,它显示区域内的图片才是完全不透明的。比如上面从白色到黑色的四个圆是遮罩,它的颜色越深,城堡图片对应位置的透明度越低。遮罩全黑时,城堡就不见了。

(注:国内很多移动端浏览器尚未支持HTML5的Canvas遮罩效果,所以它目前更适用于PC端展示。)

.

3、演示,是调节气氛的步伐

如果想要设计一场毫无缺漏的发布会,直接搞一场录播就行,但也失去了现场的魅力。因为可能会出现各种突发情况,现场才更刺激、更有吸引力。怎样能在展示中加入可控的“变量”来调节气氛?

答案之一是演示,而且最好是用一些让观众自己上台,同样能轻易完成的行为。电脑上的比如简单的拖动,如上图,利用有趣的遮罩结合拖动来展示不同型号的苹果手机。

这里应用到了遮罩强悍的“滤镜”功能,设置很简单,只是把刚才的白色苹果LOGO做成了彩色渐变,再用一张苹果手机的图片作为彩色LOGO的遮罩。这样一来,相当于保留了LOGO的颜色特征,又能利用苹果手机图片的色彩明暗变化让LOGO现出苹果手机的“原形”。

这时候,把苹果LOGO图片的“拖动类型”设为任何方向,就能在展示中途随意用鼠标拖移苹果LOGO,演示为苹果手机加彩色滤镜的特技了。

KEY#3:想要实现Prezi的聚焦放大效果?用iH5的事件工具,在一张允许拖动的图片上放个透明按钮,设置点击按钮时图片尺寸放大就行。

“除非你有值得一说的东西,不然你就做不了一个好的演讲。”

全球赫赫有名的TED大会,靠演讲为世界传播了各种各样的创意。而作为TED多年的策展人Chris Anderson,有着上面这句名言。

有了值得一说的东西,是否有足够好的演讲手段,是史蒂夫·乔布斯和蒂姆·库克在苹果发布会上反响的区别。你更欣赏乔布斯还是库克?现在,你还要错过用动态展示抓住观众注意力的机会吗?