重学前端
程劭非(winter)
前手机淘宝前端负责人
立即订阅
32956 人已学习
课程目录
已完结 58 讲
0/4登录后,你可以任选4讲全文学习。
开篇词+学习路线+架构图 (3讲)
开篇词 | 从今天起,重新理解前端
免费
明确你的前端学习路线与方法
列一份前端知识架构图
模块一:JavaScript (15讲)
JavaScript类型:关于类型,有哪些你不知道的细节?
JavaScript对象:面向对象还是基于对象?
JavaScript对象:我们真的需要模拟类吗?
JavaScript对象:你知道全部的对象分类吗?
JavaScript执行(一):Promise里的代码为什么比setTimeout先执行?
JavaScript执行(二):闭包和执行上下文到底是怎么回事?
JavaScript执行(三):你知道现在有多少种函数吗?
JavaScript执行(四):try里面放return,finally还会执行吗?
JavaScript词法:为什么12.toString会报错?
(小实验)理解编译原理:一个四则运算的解释器
JavaScript语法(预备篇):到底要不要写分号呢?
JavaScript语法(一):在script标签写export为什么会抛错?
JavaScript语法(二):你知道哪些JavaScript语句?
JavaScript语法(三):什么是表达式语句?
JavaScript语法(四):新加入的**运算符,哪里有些不一样呢?
模块二:HTML和CSS (16讲)
HTML语义:div和span不是够用了吗?
HTML语义:如何运用语义类标签来呈现Wiki网页?
CSS语法:除了属性和选择器,你还需要知道这些带@的规则
HTML元信息类标签:你知道head里一共能写哪几种标签吗?
CSS 选择器:如何选中svg里的a元素?
CSS选择器:伪元素是怎么回事儿?
HTML链接:除了a标签,还有哪些标签叫链接?
CSS排版:从毕升开始,我们就开始用正常流了
HTML替换型元素:为什么link一个CSS要用href,而引入js要用src呢?
HTML小实验:用代码分析HTML标准
CSS Flex排版:为什么垂直居中这么难?
CSS动画与交互:为什么动画要用贝塞尔曲线这么奇怪的东西?
HTML语言:DTD到底是什么?
CSS渲染:CSS是如何绘制颜色的?
CSS小实验:动手做,用代码挖掘CSS属性
HTML·ARIA:可访问性是只给盲人用的特性么?
模块三:浏览器实现原理与API (9讲)
浏览器:一个浏览器是如何工作的?(阶段一)
浏览器:一个浏览器是如何工作的?(阶段二)
浏览器:一个浏览器是如何工作的(阶段三)
浏览器:一个浏览器是如何工作的?(阶段四)
浏览器:一个浏览器是如何工作的?(阶段五)
浏览器DOM:你知道HTML的节点有哪几种吗?
浏览器CSSOM:如何获取一个元素的准确位置
浏览器事件:为什么会有捕获过程和冒泡过程?
浏览器API(小实验):动手整理全部API
模块四:前端综合应用 (5讲)
性能:前端的性能到底对业务数据有多大的影响?
工具链:什么样的工具链才能提升团队效率?
持续集成:几十个前端一起工作,如何保证工作质量?
搭建系统:大量的低价值需求应该如何应对?
前端架构:前端架构有哪些核心问题?
特别加餐 (9讲)
新年彩蛋 | 2019,有哪些前端技术值得关注?
用户故事 | 那些你与“重学前端”的不解之缘
期中答疑 | name(){}与name: function() {},两种写法有什么区别吗?
答疑加餐 | 学了这么多前端的“小众”知识,到底对我有什么帮助?
加餐 | 前端与图形学
加餐 | 前端交互基础设施的建设
期末答疑(一):前端代码单元测试怎么做?
期末答疑(二):前端架构中,每个逻辑页面如何可以做到独立发布呢?
加餐 | 一个前端工程师到底需要掌握哪些技能?
尾声 (1讲)
尾声 | 长风破浪会有时,直挂云帆济沧海
重学前端
登录|注册

CSS动画与交互:为什么动画要用贝塞尔曲线这么奇怪的东西?

winter 2019-04-20
你好,我是 winter,今天我们来学习一下 CSS 的动画和交互。
在 CSS 属性中,有这么一类属性,它负责的不是静态的展现,而是根据用户行为产生交互。这就是今天我们要讲的属性。
首先我们先从属性来讲起。CSS 中跟动画相关的属性有两个:animation 和 transition。

animation 属性和 transition 属性

我们先来看下 animation 的示例,通过示例来了解一下 animation 属性的基本用法:
@keyframes mykf
{
from {background: red;}
to {background: yellow;}
}
div
{
animation:mykf 5s infinite;
}
这里展示了 animation 的基本用法,实际上 animation 分成六个部分:
animation-name 动画的名称,这是一个 keyframes 类型的值(我们在第 9 讲“CSS 语法:除了属性和选择器,你还需要知道这些带 @的规则”讲到过,keyframes 产生一种数据,用于定义动画关键帧);
animation-duration 动画的时长;
animation-timing-function 动画的时间曲线;
animation-delay 动画开始前的延迟;
animation-iteration-count 动画的播放次数;
animation-direction 动画的方向。
取消
完成
0/1000字
划线
笔记
复制
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《重学前端》,如需阅读全部文章,
请订阅文章所属专栏。
立即订阅
登录 后留言

精选留言(4)

  • 阿成
    const tweenFns = {
      linear: (from, to, t, d) => from + (to - from) * (t / d)
    }

    /**
     * only support "linear" timing-function
     * duration unit is "ms"
     * @param {HTMLElement} el
     * @param {({prop: String, value: String, duration: Number})[]} list
     */
    function transitionTo(el, list) {
      let startTime
      let oldStyle = new Map()
      let newStyle = new Map()
      for (let prop of list) {
        oldStyle.set(prop.name, window.getComputedStyle(el)[prop.name])
      }
      for (let prop of list) {
        el.style[prop.name] = prop.value
      }
      for (let prop of list) {
        newStyle.set(prop.name, window.getComputedStyle(el)[prop.name])
      }
      for (let prop of list) {
        el.style[prop.name] = oldStyle.get(prop.name)
      }


      requestAnimationFrame(run)

      function run(time) {
        if (startTime == null) startTime = time
        let t = time - startTime
        let done = true
        for (let prop of list) {
          if (t >= prop.duration) {
            el.style[prop.name] = newStyle.get(prop.name)
            continue
          }
          done = false
          let oldPropValue = oldStyle.get(prop.name)
          let newPropValue = newStyle.get(prop.name)
          if (prop.name === 'transform') {
            if (oldPropValue === 'none') oldPropValue = 'matrix(1, 0, 0, 1, 0, 0)'
            if (newPropValue === 'none') newPropValue = 'matrix(1, 0, 0, 1, 0, 0)'
          }
          el.style[prop.name] = generateNewStyle(oldPropValue, newPropValue, t, prop.duration, tweenFns.linear)
        }
        if (!done) requestAnimationFrame(run)
      }
    }

    function generateNewStyle(from, to, t, duration, tweenFn) {
      let fromExp = /[\d.-]+/g
      let toExp = /[\d.-]+/g
      let fromMatch
      let toMatch
      let result = ''
      let lastIndex = 0
      while (fromMatch = fromExp.exec(from)) {
        result += from.slice(lastIndex, fromMatch.index)
        toMatch = toExp.exec(to)
        result += tweenFn(+fromMatch[0], +toMatch[0], t, duration)
        lastIndex = fromExp.lastIndex
      }
      result += from.slice(lastIndex)
      return result
    }
    2019-04-20
    1
    13
  • 阿成
    跟CSS的transition比,JS更加偏向指令式,而CSS更加偏向声明式,当然,这本身也是两门语言自身的特点,CSS用法简单直观,JS则在控制方面有更大的灵活性。

    上面我只实现了 linear timing function(其他的函数实现网上大把大把的...),具体用法如下:
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
      <style>
        #ball {
          width: 100px;
          height: 100px;
          background: blue;
        }
      </style>
    </head>
    <body>
      <div id="ball"></div>

      <script src="transition.js"></script>
      <script>
        transitionTo(document.getElementById('ball'), [
          {name: 'transform', duration: 1000, value: 'translate(400px, 200px) rotate(40deg)'},
          {name: 'backgroundColor', duration: 1000, value: 'red'},
          {name: 'width', duration: 1000, value: '200px'},
          {name: 'height', duration: 1000, value: '200px'}
        ])
      </script>
    </body>
    </html>
    2019-04-20
    11
  • 许童童
    这个课后练习有点难啊。希望老师可以带着大家过一遍。
    2019-04-20
    3
  • geekdocs.cn
    一脸懵逼状态看完的~
    2019-09-27
    1
收起评论
4
返回
顶部