H5的专门请求动画的API,请求动画帧
实现动画的方法有很多,比如js的setTimeOut,css3的transition、animation、H5的canvs也可以实现,
setTimeOut就是一个通过设置时间间隔不断改变图像的位置去达到动画效果,但会卡顿等问题
原因是:
zd
requestAnimationFrame最大的优势就是由系统来决定回掉函数的执行时机,比如刷新频率是75hz,那么执行回掉函数的间隔就是1000/75,如果是65则会同步改变,这样不会引起丢帧能保证回掉函数在每一次刷新的间隔执行一次,但是还是存在兼容性的问题
它与setTimeOut的执行顺序不一定谁先执行,因为requestAnimationFrame的执行原因是屏幕的分辨率和尺寸,而setTimeOut的原因是任务队列、页面渲染
ie6789不兼容:切换为setTimeOut可以兼容ie等其他浏览器
require.context:动态加载require变量。
下面是写法:
三个参数:路径/是否获取目录下的全部(布尔值)/正则表达式
三个属性:keys、resolve、id
lujing就是第二幅图的webpackContext,可以看到function webpackContext这个函数返回的是一个以id为参数的require函数,并且在里面调用了webpackContextResolve函数,这个函数通过匹配map下的数组,返回匹配出来的if给webpackContext函数,这个时候就得到了真正真确的id。lujing.keys()得到的是一个数组,["./beijing.png",'./beijingen/png'。。。。。],这个就对应function webpackContextKeys这个函数,这个函数中就淡回了map这个数组
transform: rotate | scale | skew | translate | matrix,transform在使用多个属性的时候需要用空格隔开,而不是逗号
rotate:旋转:teansform-origin可以用这个属性指定旋转基点,其余就是旋转角度
translate:移动:translate(x,y),默认元素的中点在元素中心,也可以通过transform-origin改变,如果只写了一个,则会以0看待,也可以光写translateX和translateY
scale缩放,同transform
skew扭曲
改变元素的基点:transform-origin 可以通过left、right、top和bottom控制,也可以通过百分比,但是他并不是transform中的属性,她具有自己的语法,比较类似于background-position,但是又不同,不同之处在于使用它需要加不同浏览器的内核名称