xml地图|网站地图|网站标签 [设为首页] [加入收藏]
澳门新葡亰手机版h5开发相关内容总结,动画的回
分类:web前端

CSS或JS实现gif动态图片的停止与播放

2015/12/06 · CSS, JavaScript · gif

原文出处: 张鑫旭   

一、屋外:寒风吹,雪花飘;屋内:空调吹,代码飘

上午出去买菜,正好下雨了,还夹杂着冰珠子。鄙人大意,穿的是一件帅气但单薄的黄色大衣,立马冻成了中华田园犬。原本计划去钓鱼的,科科,作罢,上午在家看CCTV5 骑士队vs鹈鹕队,下午补动漫码代码做文章,好生惬意。

澳门新葡亰手机版 1

对于习惯性刷微博的我,总时不时会看到类似下面的游戏:

测测你和小白(白百何)有哪些共同点,戳开动图,最先看清的词是什么?ie浏览器的同学可以按esc键(或截屏),据说在哪个词暂停,哪个词就是你哦!澳门新葡亰手机版 2

澳门新葡亰手机版 3

OK, 这里出现一个浏览器特性,就是通过ESC快捷键,暂停gif的播放。据说FireFox浏览器以前也有,后来被干掉了,根据@紫云妃的说法是:

是这样的,Firefox原来的表现是:在页面load事件完成,同时x按钮变成刷新按钮之后,esc仍然有几个作用,中断当前正在发送的ajax,websocket,停止gif,apng动画的播放.但这些功能太小众了,影响了普通用户的使用,可能不小心按了esc,结果ajax断了,网页出错了.所以Firefox20修改成:网页加载完成后,esc键完全失效.

然而,这种隐晦的但似乎会影响正常功能的小技巧显然是无法实现真正意义上的gif动态图片的停止与播放的。一是兼容性,二是功能性,三是移动端没有ESC键。

所以,如果我们遇到需要可以随时随地停止gif动态图片播放的需求的时候,就需要寻找其他的出路。好,寒冬里的暖身结束,开始进入正题~~

css 动画的回调

2016/01/11 · CSS · 动画

原文出处: 卖烧烤夫斯基   

在做项目中经常会遇到使用动画的情况。以前的情况是用js写动画,利用setTimeout函数或者window.requestAnimationFrame()实现目标元素的动画效果。虽然后者解决了刷新频率和移动频率同步的问题,但是因为js频繁地操作dom带来的额外开销和复杂的计算公式使得大多数开发者对用原生js动画望而却步而取道各种插件动画。这其实也是html的一块软肋,在网站上做动画,无论就效果还是性能,JS还是差了flash很多步。所以当html5和css3的标准出现后,这种情况转变成了多数人从js复杂的动画转向了稍微容易的css动画。css3为我们提供了很棒的api来实现之前需要费很大的功夫才能实现的功能。只需要很简单的代码,任何人都可以快速地学会css动画。下面是一个动画沿Y轴的上下游走的例子(此处均已webkit内核为默认标准,实际情况需要自己兼容):

transform:

CSS

.mydiv { width:100px; height:100px; background:red; -webkit-transition: all 2s; } .newClass { -webkit-transform: translateY(100px) }

1
2
3
4
5
6
7
8
9
.mydiv {
    width:100px;
    height:100px;
    background:red;
    -webkit-transition: all 2s;
}
.newClass {
    -webkit-transform: translateY(100px)
}

animation:

CSS

@-webkit-keyframes mymove {     from {top:0px;}     to {top:200px;} } .mydiv {     width:100px;     height:100px;     background:red;     position:relative;     -webkit-animation:mymove 2s forwards; /* Safari and Chrome */ }

1
2
3
4
5
6
7
8
9
10
11
@-webkit-keyframes mymove {
    from {top:0px;}
    to {top:200px;}
}
.mydiv {
    width:100px;
    height:100px;
    background:red;
    position:relative;
    -webkit-animation:mymove 2s forwards; /* Safari and Chrome */
}

以上是目前css动画经常用到的两种写法。就简洁单的动画来说一般倾向使用第一种transoform,如果需要在做复杂的转换,可以使用第二种animation方法,通过在不同的运动帧上写下该帧的状态实现。

很多情况下我们需要知道动画何时完成,以及什么完成后需要做什么。也就是说需要一个动画完成的回调函数。在js动画中你不需要担心找不到回调函数,因为动画本身全依赖于js,回调只不过是一个普通的函数而已。首先,卤煮也是习惯性地用js思维思考这个问题。既然知道动画的变化时间,那么可以用延时解决回掉的问题。下面是延时的方法

JavaScript

//css中代码可以看到动画持续2s var delay = 2000; setTimtout(function(){ dosomething() }, delay);

1
2
3
4
5
//css中代码可以看到动画持续2s
var delay = 2000;
setTimtout(function(){
    dosomething()
}, delay);

上面的方法是不难理解,延时一个函数执行,延时的时长就是动画变化的时间,这样,看起来当动画完成时会立即执行函数。但是,这种方式存在着很多严重的缺陷。第一、setTimeout函数和css动画不一定是一致的。因为动画开始的时间和setTimeout的时间严格来说不是一直的,所以会出现要么函数提前执行,要么动画提前结束。第二、js代码和css代码耦合了。delay的时间要随时跟着css内的时间走,如果css代码改变或者js代码改变,两边都必须花时间修复同步(也就是改成为一致时间)这增加了工作量。第三、多个动画会带来更多的代码量和不确定因素。因为每一个定时器针对的是单独的动画元素,所以动画元素一多起来就必须添加更多的代码。第四、无法处理多个动画元素同一时间结束的情况。等。。。。

以上只是部分发现的缺点,对于复杂的动画来说,延时函数是完全不能适应。那么有方法处理动画的回调吗?答案当然是肯定的。而且很简单,跟之前绑定点击事件是一样的。js提供了css3中两种动画的结束事件。我们利用它们,可以很容易捕获到动画的完成情况。

transitionEnd

JavaScript

document.getElementById('my').addEventListener('transitionEnd', function(){ alert('Transform animation has done!'); });

1
2
3
document.getElementById('my').addEventListener('transitionEnd', function(){
    alert('Transform animation has done!');
});

animationend

JavaScript

document.getElementById('my').addEventListener('animationend', function(){ alert('Animation has done!....'); });

1
2
3
document.getElementById('my').addEventListener('animationend', function(){
    alert('Animation has done!....');
});

我们可以看到,它们对于开发者来说一点也不陌生。不论是用法还是字面名称,都使得我们能够一目了然。其实说了啰里吧嗦一大堆,这篇博客主要就是两个事件名称而已。下面是它们的兼容效果。大多数浏览器都支持了这两种事件,基本上支持css3动画的浏览器就会支持这两种事件。

澳门新葡亰手机版 4

澳门新葡亰手机版 5

补充一点:animationend只是animation变化事件中的一种。你应该能想到其他的变化状态,没错就是:animationstart,animationiteration. 利用这三种状态时间,我们可以随心所欲的控制变化中的动画效果。尤其是animationiteration事件,能够让我们在动画变化过程中插上一手。

1 赞 3 收藏 评论

澳门新葡亰手机版 6

移动端 h5开发相关内容总结:CSS篇

2016/01/24 · CSS, HTML5 · 1 评论 · 移动端

本文作者: 伯乐在线 - zhiqiang21 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

二、gif图片自己可控前提下的方法一:多img资源控制处理

假如说,我们希望暂停的gif是自己(开发人员)传上去的,不是用户可以随机上传不可控的gif. 我们可以这么处理,就是准备2套图片,一个是gif动态图片,还有一个是只有一帧的静止的图片。然后使用JS来回切换`的src`值为这两张图片地址就好了。

此方法甚简单,我就不放实例了。

img.src="animate.gif"; // 或者呈现的是 img.src="static.png";

1
2
3
img.src="animate.gif";
// 或者呈现的是
img.src="static.png";

这个方法最大的优点就是兼容性强,所有浏览器都可以实现停止效果。然而,这种方法有个局限,就是,暂停时候呈现的图片永远是同一张。基本上可以说是停止,而不是暂停。

那有没有什么方法可以真正意义上的暂停呢?还真有!

1.移动端开发视窗口的添加

h5端开发下面这段话是必须配置的

XHTML

meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

1
meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

其它相关配置内容如下:

  • width viewport 宽度(数值/device-width)
  • height viewport 高度(数值/device-height)
  • initial-scale 初始缩放比例
  • maximum-scale 最大缩放比例
  • minimum-scale 最小缩放比例
  • user-scalable 是否允许用户缩放(yes/no)
  • minimal-ui iOS 7.1 beta 2 中新增属性(注意:iOS8 中已经删除),可以在页面加载时最小化上下状态栏。

三、gif图片自己可控前提下的方法二:CSS3 animation控制

也就是我们看到的gif效果并不是一个真正的gif图片,而是使用CSS3的animation属性控制形成的逐帧动态图片效果。我搜了下,@DO1路人乙有篇文章“css3-animation制作逐帧动画”专门介绍了这种技术。说穿了就是animation控制Sprites图片的background-position值模拟gif效果。

例如,新版twitter的Like的效果,貌似就有使用该技术:
澳门新葡亰手机版 7

使用CSS3 animation实现类gif效果的好处在于,图片可以无损,且我们可以很轻松地控制图片动画的暂停和播放,使用的是:animation-play-state: paused;这个声明。

您可以狠狠地点击这里:使用CSS3 animation实现gif动图的暂停和播放demo

点击demo页面的暂停按钮,您会发现,直接就停住了,如下截图示意,截自IE10浏览器:
澳门新葡亰手机版 8

再次点击,就会在暂停画面之后继续播放了。从而实现了我们对动画图片的精确控制效果。

此方法看上去完美,但是,1. IE10+等支持CSS3 animation的浏览器才行;2. 最大的问题是图片需要是自己控制,如果想控制用户上传的真正意义的gif图片,只能……望洋兴叹……………………吗?

2.媒体查询的改进

之前在做移动端开发的时候,为了适配多屏幕。使用的是rem 单位。这个时候就需要根据屏幕的尺寸来来动态的设置根节点htmlfont-size 值。这样可以解决多屏幕适配的问题。
比如下面的 媒体查询代码

XHTML

html { //iphone5 font-size: 62.5%; } @media (max-width: 414px) { html { //iphone6+ font-size: 80.85%; } } @media (max-width: 375px) { html { //iphone6 font-size: 73.24%; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
html {
    //iphone5
    font-size: 62.5%;
}
@media (max-width: 414px) {
    html {
        //iphone6+
        font-size: 80.85%;
    }
}
@media (max-width: 375px) {
    html {
        //iphone6
        font-size: 73.24%;
    }
}

这样做的结果,有两个很明显的缺点

  • 适配屏幕的尺寸不是连续的。
  • 在自己的 css 文件中添加大段的这样查询代码。增加了 css 文件的体积。

后来参考淘宝移动端页面适配规则,使用 js 获取客户端的宽度,根据设计稿的原型动态的计算font-size 的值。

详细的内容请看这里 根据iPhone6设计稿动态计算rem值

四、自己无法控制的gif图片的停止与播放

比方说,页面上用户上传了些gif图片,哎呀,闪瞎了我的中华田园眼,我要全部暂停,肿么办?如果后台同学没有对gif进行静态处理,此时,只能靠前端小伙伴,有什么办法吗?

有一个。HTML5 canvas可以读取图片信息,绘制当前图片。于是可以实现图片马赛克,模糊,色值过滤等很多图片特效。我们这里不用那么复杂,只要读取我们的图片,重绘下就可以。

您可以狠狠地点击这里:使用JS和canvas实现gif动图的停止和播放demo

点击按钮,然后:
澳门新葡亰手机版 9

澳门新葡亰手机版 10

如何使用?
我对HTMLImageElement原型进行了扩展,增加了stop()play()两个方法,如下:

if ('getContext' in document.createElement('canvas')) { HTMLImageElement.prototype.play = function() { if (this.storeCanvas) { // 移除存储的canvas this.storeCanvas.parentElement.removeChild(this.storeCanvas); this.storeCanvas = null; // 透明度还原 image.style.opacity = ''; } if (this.storeUrl) { this.src = this.storeUrl; } }; HTMLImageElement.prototype.stop = function() { var canvas = document.createElement('canvas'); // 尺寸 var width = this.width, height = this.height; if (width & height) { // 存储之前的地址 if (!this.storeUrl) { this.storeUrl = this.src; } // canvas大小 canvas.width = width; canvas.height = height; // 绘制图片帧(第一帧) canvas.getContext('2d').drawImage(this, 0, 0, width, height); // 重置当前图片 try { this.src = canvas.toDataURL("image/gif"); } catch(e) { // 跨域 this.removeAttribute('src'); // 载入canvas元素 canvas.style.position = 'absolute'; // 前面插入图片 this.parentElement.insertBefore(canvas, this); // 隐藏原图 this.style.opacity = '0'; // 存储canvas this.storeCanvas = canvas; } } }; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
if ('getContext' in document.createElement('canvas')) {
    HTMLImageElement.prototype.play = function() {
        if (this.storeCanvas) {
            // 移除存储的canvas
            this.storeCanvas.parentElement.removeChild(this.storeCanvas);
            this.storeCanvas = null;
            // 透明度还原
            image.style.opacity = '';
        }
        if (this.storeUrl) {
            this.src = this.storeUrl;    
        }
    };
    HTMLImageElement.prototype.stop = function() {
        var canvas = document.createElement('canvas');
        // 尺寸
        var width = this.width, height = this.height;
        if (width & height) {
            // 存储之前的地址
            if (!this.storeUrl) {
                this.storeUrl = this.src;
            }
            // canvas大小
            canvas.width = width;
            canvas.height = height;
            // 绘制图片帧(第一帧)
            canvas.getContext('2d').drawImage(this, 0, 0, width, height);
            // 重置当前图片
            try {
                this.src = canvas.toDataURL("image/gif");
            } catch(e) {
                // 跨域
                this.removeAttribute('src');
                // 载入canvas元素
                canvas.style.position = 'absolute';
                // 前面插入图片
                this.parentElement.insertBefore(canvas, this);
                // 隐藏原图
                this.style.opacity = '0';
                // 存储canvas
                this.storeCanvas = canvas;
            }
        }
    };
}

大家只要在页面中自己的JS文件中复制上面的代码,然后就可以直接:

var image = document.getElementsByTagName("img")[0]; // 停止gif图片 image.stop(); // 播放gif图片 image.play();

1
2
3
4
5
var image = document.getElementsByTagName("img")[0];
// 停止gif图片
image.stop();
// 播放gif图片
image.play();

//zxx: 上面代码并未详尽测试,以及可能的体验问题(IE闪动)没有具体处理(影响原理示意),若要实际使用,需要自己再微调完美下。

不足

  1. IE9+支持。IE7/IE8不支持canvas没搞头。
    2. 只能停止gif,不能真正意义的暂停。因为canvas获得的gif图片信息为第一帧的信息,后面的貌似获取不到。要想实现暂停,而不是停止,还需要进一步研究,如果你有方法,非常欢迎分享。

3.a标签内容语义化

大多数时候我们都会给一片区域加上点击跳转的功能。如下图:

澳门新葡亰手机版 11

很可能我们商品区域都是使用的div 标签。很容易我们会给最外层加上一个 a 标签。因为a 是行内元素,是没有宽和高的。不能够把容器撑开。
一种解决办法就是给a 标签设置block 属性。如下:

XHTML

<style> a{display:block;} </style> <a> <div></div> </a>

1
2
3
4
5
6
7
<style>
    a{display:block;}
</style>
 
<a>
    <div></div>
</a>

功能上已经没有问题。但是在语义化的层面上,上面的代码是不标准的。

最好的做法就是做如下的修改,这样不会使自己的 html 代码显的太突兀:

XHTML

<style> a{display:block;} span{dispaly:block;} </style> <a> <span></span> <span></span> <span></span> </a>

1
2
3
4
5
6
7
8
9
10
<style>
a{display:block;}
span{dispaly:block;}
</style>
 
<a>
    <span></span>
    <span></span>
    <span></span>
</a>

五、结束语

是胡不是霍,是霍躲不过!哈哈!
澳门新葡亰手机版 12
上面这个gif也是demo示意gif强力候选。后来一琢磨,看我文章的还是宅男多,腐女少,所以,你懂的……
澳门新葡亰手机版 13

——我是多年不见的低调的分隔线—–

本文gif比较多,如果您是移动设备查看本文,会发现,怎么我的电池怎么越来越瘦了!不是因为天冷冻小了,而是gif比较耗电。所以,从这个角度讲,我们其实有必要在移动端默认停止这些gif的播放,用户点击再播放。一来省流量,二来省电。

如果没有静态图片资源支持,那不妨试试文章出现的一些方法,有心得记得来这里反馈哈! 澳门新葡亰手机版 14

最后,本文的方法都是有瑕疵的,自己也尚未在实际项目中使用过。因此,假如阅读本文的您:

  1. 有更完美的gif暂停与播放方法;
  2. 发现文中方法有不足和遗漏;

都非常希望可以不吝赐教!

感谢阅读!周末温暖!

 

1 赞 6 收藏 评论

澳门新葡亰手机版 15

4.为自己的页面设置最大宽度和最小宽度

如果我们使用的是rem 单位,使用 js 动态计算font-size 值的话,我们可以无限适配最大和最小的终端屏幕。但是当用户的屏幕超过一定的尺寸以后还继续显示h5页面的话对用户会很不友好。
我们参看下京东和淘宝的h5 页面

澳门新葡亰手机版 16
澳门新葡亰手机版 17

我们看到了都是定义了页面的最大和最小宽度。这样在屏幕超过一定的尺寸以后可以更友好的展示(当然这不是必须的)。

我给自己的产品页面定义的最大的宽度和最小宽度分别是:

CSS

{ max-width:640px; min-width:320px; }

1
2
3
4
{
    max-width:640px;
    min-width:320px;
}

5.去掉 a,input 在移动端浏览器中的默认样式

1.禁止 a 标签背景

在移动端使用 a标签做按钮的时候,点按会出现一个“暗色”的背景,去掉该背景的方法如下

CSS

a,button,input,optgroup,select,textarea { -webkit-tap-highlight-color:rgba(0,0,0,0); /*去掉a、input和button点击时的蓝色外边框和灰色半透明背景*/ }

1
2
3
a,button,input,optgroup,select,textarea {
    -webkit-tap-highlight-color:rgba(0,0,0,0); /*去掉a、input和button点击时的蓝色外边框和灰色半透明背景*/
}

2.禁止长按 a,img 标签长按出现菜单栏

使用 a标签的时候,移动端长按会出现一个 菜单栏,这个时候禁止呼出菜单栏的方法如下:

CSS

a, img { -webkit-touch-callout: none; /*禁止长按链接与图片弹出菜单*/ }

1
2
3
a, img {
    -webkit-touch-callout: none; /*禁止长按链接与图片弹出菜单*/
}

本文由澳门新葡亰手机版发布于web前端,转载请注明出处:澳门新葡亰手机版h5开发相关内容总结,动画的回

上一篇:没有了 下一篇:没有了
猜你喜欢
热门排行
精彩图文