0065 animation:动画、动画序列、动画常见属性、 动画简写方式、速度曲线细节、案例大数据热点图、案例奔跑的熊大

  1. 什么是动画

    • 动画是 CSS3 中最具颠覆性的特征之一,可通过设置多个节点来精确的控制一个或者一组动画,从而实现复杂的动画效果
  2. 动画的基本使用
    • 先定义动画
    • 在调用定义好的动画
  3. 语法格式(定义动画)
    /* keyframes: 关键帧 */
    @keyframes 动画名称 {
        0% {
            width: 100px;
        }
        100% {
            width: 200px
        }
    }
  4. 语法格式(使用动画)
    div {
     /* 调用动画 */
        animation-name: 动画名称;
         /* 持续时间 */
         animation-duration: 持续时间;
    }
  5. 动画序列
    • 0% 是动画的开始,100 % 是动画的完成,这样的规则就是动画序列
    • 在 @keyframs 中规定某项 CSS 样式,就由创建当前样式逐渐改为新样式的动画效果
    • 动画是使元素从一个样式逐渐变化为另一个样式的效果,可以改变任意多的样式任意多的次数
    • 用百分比来规定变化发生的时间,或用 fromto,等同于 0% 和 100%
  6. 代码演示
    <style>
        div {
          width: 100px;
          height: 100px;
          background-color: aquamarine;
          animation-name: move;
          animation-duration: 0.5s;
        }
    
        @keyframes move{
          0% {
            transform: translate(0px)
          }
          100% {
            transform: translate(500px, 0)
          }
        }
      </style>
demo1
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* 我们想页面一打开,一个盒子就从左边走到右边 */
        /* 1. 定义动画 */

        @keyframes move {
            /* 开始状态 */
            0% {
                transform: translateX(0px);
            }
            /* 结束状态 */
            100% {
                transform: translateX(1000px);
            }
        }

        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 2. 调用动画 */
            /* 动画名称 */
            animation-name: move;
            /* 持续时间 */
            animation-duration: 2s;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>
九、动画序列
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* from to 等价于  0% 和  100% */
        /* @keyframes move {
            from {
                transform: translate(0, 0);
            }
            to {
                transform: translate(1000px, 0);
            }
        } */
        /* 动画序列 */
        /* 1. 可以做多个状态的变化 keyframe 关键帧 */
        /* 2. 里面的百分比要是整数 */
        /* 3. 里面的百分比就是 总的时间(我们这个案例10s)的划分 25% * 10  =  2.5s */

        @keyframes move {
            0% {
                transform: translate(0, 0);
            }
            25% {
                transform: translate(1000px, 0)
            }
            50% {
                transform: translate(1000px, 500px);
            }
            75% {
                transform: translate(0, 500px);
            }
            100% {
                transform: translate(0, 0);
            }
        }

        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            animation-name: move;
            animation-duration: 10s;
        }
    </style>
</head>

<body>
    <div>

    </div>
</body>

</html>
动画常见属性
  1. 常见的属性
    @keyframes: 规定动画。
    animation: 所有动画属性的简写属性,除了animation-play-state属性。
    animation-name: 规定@keyframes动画的名称。
    animation-duration: 规定动画完成一个周期所花费的秒或毫秒,默认是0。
    animation-timing-function: 规定动画的速度曲线,默认是“ease”。
    animation-delay: 规定动画何时开始,默认是0。
    animation-iteration-count: 规定动画被播放的次数,默认是1,还有infinite
    animation-direction: 规定动画是否在下一周期逆向播放,默认是“normal“,alternate逆播放
    animation-play-state: 规定动画是否正在运行或暂停。默认是"running",还有"pause"。
    animation-fill-mode: 规定动画结束后状态,保持forwards回到起始backwards。

  1. 代码演示

    div {
      width: 100px;
      height: 100px;
      background-color: aquamarine;
      /* 动画名称 */
      animation-name: move;
      /* 动画花费时长 */
      animation-duration: 2s;
      /* 动画速度曲线 */
      animation-timing-function: ease-in-out;
      /* 动画等待多长时间执行 */
      animation-delay: 2s;
      /* 规定动画播放次数 infinite: 无限循环 */
      animation-iteration-count: infinite;
      /* 是否逆行播放 */
      animation-direction: alternate;
      /* 动画结束之后的状态 */
      animation-fill-mode: forwards;
    }
    
    div:hover {
      /* 规定动画是否暂停或者播放 */
      animation-play-state: paused;
    }
十一、 动画简写方式
  1. 动画简写方式

    /* (1)动画名称 持续时间必须写;(2)持续时间 要在 何时开始 的前面 */
    /* animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 起始与结束状态 */
    animation: name duration timing-function delay iteration-count direction fill-mode
  2. 知识要点
    • 简写属性里面不包含 animation-paly-state
    • 暂停动画 animation-paly-state: paused; 经常和鼠标经过等其他配合使用
    • 要想动画走回来,而不是直接调回来:animation-direction: alternate
    • 盒子动画结束后,停在结束位置:animation-fill-mode: forwards
  3. 代码演示
    animation: move 2s linear 1s infinite alternate forwards;
速度曲线细节
  1. 速度曲线细节

    • animation-timing-function: 规定动画的速度曲线,默认是ease

  1. 代码演示

    div {
      width: 0px;
      height: 50px;
      line-height: 50px;
      white-space: nowrap;
      overflow: hidden;
      background-color: aquamarine;
      animation: move 4s steps(24) forwards;
    }
    
    @keyframes move {
      0% {
        width: 0px;
      }
    
      100% {
        width: 480px;
      }
    }
综合案例:大数据热点图
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            background-color: #333;
        }

        .map {
            position: relative;
            width: 747px;
            height: 616px;
            background: url(media/map.png) no-repeat;
            margin: 0 auto;
        }

        .city {
            position: absolute;
            top: 227px;
            right: 193px;
            color: #fff;
        }

        .tb {
            top: 500px;
            right: 80px;
        }

        .dotted {
            width: 8px;
            height: 8px;
            background-color: #09f;
            border-radius: 50%;
        }

        .city div[class^="pulse"] {
            /* 保证我们小波纹在父盒子里面水平垂直居中 放大之后就会中心向四周发散 */
            /* 注意绝对定位的盒子水平居中、垂直居中的写法,除了translate,不要漏了top、left */
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 8px;
            height: 8px;
            box-shadow: 0 0 12px #009dfd;
            border-radius: 50%;
            animation: pulse 1.2s linear infinite;
        }

        .city div.pulse2 {
            animation-delay: 0.4s;
        }

        .city div.pulse3 {
            animation-delay: 0.8s;
        }

        @keyframes pulse {
            0% {}
            70% {
                /* transform: scale(5);  我们不要用scale 因为他会让 阴影变大。这里只需要让盒子的宽高变大即可。*/
                width: 40px;
                height: 40px;
                /* opacity: 透明度,0表示不透明。 */
                opacity: 1;
            }
            100% {
                width: 70px;
                height: 70px;
                opacity: 0;
            }
        }
    </style>
</head>

<body>
    <div class="map">
        <div class="city">
            <div class="dotted"></div>
            <div class="pulse1"></div>
            <div class="pulse2"></div>
            <div class="pulse3"></div>
        </div>
        <div class="city tb">
            <div class="dotted"></div>
            <div class="pulse1"></div>
            <div class="pulse2"></div>
            <div class="pulse3"></div>
        </div>
    </div>
</body>

</html>
速度曲线步长
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            overflow: hidden;
            font-size: 20px;
            width: 0;
            height: 30px;
            background-color: pink;
            /* 让我们的文字强制一行内显示 */
            white-space: nowrap;
            /* steps 就是分几步来完成我们的动画 有了steps 就不要在写 ease 或者linear 了 */
            animation: w 4s steps(10) forwards;
        }

        @keyframes w {
            0% {
                /* 注意开始、结束时的状态,开始和结束之间,若干时间内,做动画,分成若干个节点 */
                width: 0;
            }
            100% {
                width: 200px;
            }
        }
    </style>
</head>

<body>
    <div>世纪佳缘我在这里等你</div>
</body>

</html>

奔跑的熊大
  1. 代码演示
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            background-color: #ccc;
        }

        div {
            /* 不一定要用绝对定位 */
            position: absolute;
            width: 200px;
            height: 100px;
            background: url(media/bear.png) no-repeat;
            /* 我们元素可以添加多个动画, 用逗号分隔 */
            animation: bear .4s steps(8) infinite, move 3s forwards;
        }

        @keyframes bear {
            0% {
                background-position: 0 0;
            }
            100% {
                /* 注意,是背景图移动,不是div盒子移动 */
                background-position: -1600px 0;
            }
        }

        @keyframes move {
            0% {
                left: 0;
            }
            100% {
                left: 50%;
                /* margin-left: -100px; */
                transform: translateX(-50%);
            }
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

原文地址:https://www.cnblogs.com/jianjie/p/12127189.html

时间: 2024-10-09 17:42:36

0065 animation:动画、动画序列、动画常见属性、 动画简写方式、速度曲线细节、案例大数据热点图、案例奔跑的熊大的相关文章

58同城加载动画的实现( Android属性动画)

最近看了58同城新版 app ,里面还是做了很多动画特效,其中我看到加载数据时的一个加载动画比较好玩,就试着做了一下,先一起来看看效果 很多人看了这个效果图,第一个疑问就是底下的阴影部分是如何实现的?其实如果真要自己动手实现的话,这个问题反而不是问题,而真正有困难的是,如何控制这个图片上升的时候速度减慢,而下降的时候速度加快,当然这个问题只有在动手做的过程中才会发现. 这里还是按步骤来实现 1.实现整个 LoadingView的布局 public class LoadingLayout exte

Property Animation Part III(属性动画 第三部分)

如何使用TypeEvaluator 如果你想实现一个安卓系统中没有的动画类型,你可以通过实现TypeEvaluator接口创建自己的计算实现.在Android系统已实现的类型有int(IntEvaluator),float(FloatEvaluator),或颜色(ArgbEvaluator). TypeEvaluator接口中只有一个evaluate()方法需要实现.这个方法会在动画的当前点返回对应的属性值. 下面是FloatEvaluator类的实现代码 public class FloatE

Android(java)学习笔记264:Android下的属性动画高级用法(Property Animation)

1. 大家好,在上一篇文章当中,我们学习了Android属性动画的基本用法,当然也是最常用的一些用法,这些用法足以覆盖我们平时大多情况下的动画需求了.但是,正如上篇文章当中所说到的,属性动画对补间动画进行了很大幅度的改进,之前补间动画可以做到的属性动画也能做到,补间动画做不到的现在属性动画也可以做到了.因此,今天我们就来学习一下属性动画的高级用法,看看如何实现一些补间动画所无法实现的功能. 2. ValueAnimator的高级用法: 在上篇文章中介绍补间动画缺点的时候有提到过,补间动画是只能对

Android(java)学习笔记263:Android下的属性动画(Property Animation)

1. 属性动画(Property Animation)引入: 在手机上去实现一些动画效果算是件比较炫酷的事情,因此Android系统在一开始的时候就给我们提供了两种实现动画效果的方式,逐帧动画(frame-by-frame animation)和补间动画(tweened animation). 逐帧动画的工作原理很简单,其实就是将一个完整的动画拆分成一张张单独的图片,然后再将它们连贯起来进行播放,类似于动画片的工作原理. 补间动画则是可以对View进行一系列的动画操作,包括淡入淡出.缩放.平移.

Android动画效果之初识Property Animation(属性动画)(三)

前言: 前面两篇介绍了Android的Tween Animation(补间动画) Android动画效果之Tween Animation(补间动画).Frame Animation(逐帧动画)Android动画效果之Frame Animation(逐帧动画)(二),其实总结前两个的根本目的就是为了学习今天的主角Property Animation(属性动画).其实在Android最早期只提供了前两种动画方式,在Android 3.0才引入了属性动画,谷歌为何要引入属性动画呢?今天我们来总结学习一

android动画——属性动画(Property Animation)

视图动画请移步:http://blog.csdn.net/u013424496/article/details/51700077 相对与视图动画 ,属性动画(android3.0提出的) 使用条件: 完全弥补了View anim System的缺陷,你可以为一个对象的任何属性添加动画,(View或者非View),同时对象自己也会被修改. 并且当属性变化的时候,property Anim系统会自动的刷新屏幕. 属性动画系统在处理动画方面也更加强劲.更高级的,你可以指定动画的属性,比如颜色,位置,大

属性动画-Property Animation之ViewPropertyAnimator 你应该知道的一切

转载请注明出处(万分感谢!): http://blog.csdn.net/javazejian/article/details/52381558 出自[zejian的博客] 关联文章: 走进绚烂多彩的属性动画-Property Animation(上篇) 走进绚烂多彩的属性动画-Property Animation之Interpolator和TypeEvaluator(下篇) ??原本打算这篇作为属性动画的完结篇,但目前情况来看,估计无法完结,前两天研究了一下ViewPropertyAnimat

Android 动画详解之属性动画(Property Animation)(下)

Hello,大家好,最近好长时间没有写博客了,因为我决定辞职了. 废话不多说,我们还是来看属性动画在上一篇Android 动画详解之属性动画(Property Animation)中我们简单的介绍了一下属性动画的用法,其实属性动画还有更多有趣的用法. 1,在xml中使用 在eclipse中我们右键新建xml可以选择新建属性动画,如图 我们选择objectAnimator,然后我们就会看到熟悉的一幕 然后我们用智能提示就可以看到更熟悉的 没错,这下我们应该知道怎么用xml布局来写属性动画了吧 <s

使用属性动画 &mdash; Property Animation

属性动画,就是通过控制对象中的属性值产生的动画.属性动画是目前最高级的2D动画系统. 在API Level 11中添加.Property Animation号称能控制一切对象的动画,包括可见的和不可见的. 但是,日常开发中我们一般都是对UI定制动画.   使用ObjectAnimator ObjectAnimator是其中比较容易使用的一个动画类,它继承自ValueAnimator, 说比较容易使用是因为它在动画启动后自动监视属性值的变化并把值赋给对象属性, 而ValueAnimator则只监视