zoukankan      html  css  js  c++  java
  • CSS动画-step()帧动画

    Twitter使用了一种新的动画形式,使用一系列的图片来创建帧动画。

    下面是一个动画,鼠标移动到上面开始绽放。

    查看codepen 示例

    示例教程

    鼠标移动到星上显示动画

    首先我们要准备一系列构成动画的图片,这里我们使用Twitter收藏夹动画使用的图片集合来制作动画。

    下面是动画中要使用的图片集合,为了方便显示,我折行显示。

    twitter_fave_rectangle.png

    在实际开发中,我们要把图片放在一行,为了在动画中从第一帧过渡到最后一针,twitter_fave.png 这个文件把图片放在了一行。

    step() 计时函数

    和大多数的计时函数不同,如easecubic-bezier,动画是从开始到结束时平滑过渡的,而step()步骤函数,将动画分为多个步骤(帧),在多个步骤中急剧过渡,来显示动画效果。

    steps.png

    1、首先我们创建HTML标签

    <section class="fave"></section>
    

    2、添加背景图片样式

    .fave {
       70px;
      height: 50px;
      background: url(images/tritter_fave.png) no-repeat
      background-position: 0 0; // 图片指针定位左上角
    }
    

    3、在hover状态,鼠标悬浮到图片上,开始切换背景图片

    .fave:hover {
      background-position: -3519px 0; // 使背景图片相对容器左移,多余背景图片将溢出容器不显示
      transition: background 1s step(55); // 步骤为55步,即切换55帧动画
    }
    

    这里我们对背景进行切换,时间为1秒,分为55帧。

    为什么不用gif

    因为gif的图片更大,占用资源更多,不能控制帧率,而使用CSS动画可以自由控制帧率,可以方便控制动画的暂停、后退或其他适配功能。

    step计时函数的其他用途

    背景图片精灵只是step()计时函数的一个使用示例,它还能挖掘出更多的应用场景,如滴答的时钟等。

    参考链接

  • 相关阅读:
    什么是MongoDb
    Python之人工智能:PyAudio 实现录音 自动化交互实现问答
    Python人工智能之初识接口
    cordova(安卓)(腾讯信鸽注册绑定与反绑定) 插件开发
    sencha touch 在安卓中横屏、竖屏切换 应用崩溃问题
    Sencha Touch 实战开发培训 电子书 基础篇
    wps 批量调整图片大小 宏
    使用 crosswalk-cordova 打包sencha touch 项目,再也不用担心安卓兼容问题!
    Sencha Cmd 5.0.1.231 是坑爹货
    sencha touch api 使用指南
  • 原文地址:https://www.cnblogs.com/iPing9/p/12082410.html
Copyright © 2011-2022 走看看