ccs3 transform,transition,animation了解下

1. 找插件
2. 找不到的話自己用java/object-c/swift封裝插件

這是PHP？
我一個(gè)菜逼前端 BB一句？
是不是 $this 指向的問(wèn)題？

@donglegend 你好，謝謝，基本上可以，但是這種方式感覺(jué)有缺陷，如下：

//假設(shè)我想在1s中完成動(dòng)畫(huà)（滑動(dòng)250px）
//那么我需要函數(shù)執(zhí)行多少次呢？
//很顯然，如果我想動(dòng)畫(huà)看上去越順滑，那必須每次移動(dòng)的像素就越小，所以函數(shù)執(zhí)行越頻繁；
//相反，如果函數(shù)間隔時(shí)間越大，動(dòng)畫(huà)會(huì)非常難看（一次移動(dòng)的像素太多）

問(wèn)題：假設(shè)我滑動(dòng)的距離足夠大（1000px），執(zhí)行的時(shí)間足夠短（0.3s），看上去動(dòng)畫(huà)要足夠順滑（每次移動(dòng)5px），那么函數(shù)需要多長(zhǎng)時(shí)間執(zhí)行一次呢？ 。0.3 / (1000 / 5) ，0.3s要執(zhí)行200次函數(shù)，每 0.0015s 執(zhí)行一次，這么頻繁的執(zhí)行函數(shù)到底有沒(méi)有問(wèn)題呢？如果每次只能移動(dòng)1px呢？

再者就是這些計(jì)算麻煩，不如css3動(dòng)畫(huà)來(lái)得方便。

我用css實(shí)現(xiàn)的動(dòng)畫(huà)和js鉤子實(shí)現(xiàn)的作比較，都是0.3s，總感覺(jué)css的動(dòng)畫(huà)要快，要順滑。

<template>
    <transition
        v-on:before-enter="beforeEnter"
        v-on:enter="enter"
        v-on:leave="leave"
    >
        <slot></slot>
    </transition>
</template>
<script>
export default {
    name: 'animation',
    data() {
        return {
            enterTimer: null,
            leaveTimer: null
        }
    },
    methods: {
        beforeEnter: function(el) {
            //設(shè)置滑塊的初始位置（滑塊的寬度）
            el.style.bottom = '-250px'
        },
        enter: function(el, done) {
            clearInterval(this.leaveTimer)
            let _v = 0
            //假設(shè)我想在1s中完成動(dòng)畫(huà)（滑動(dòng)250px）
            //那么我需要函數(shù)執(zhí)行多少次呢？
            //很顯然，如果我想動(dòng)畫(huà)看上去越順滑，那必須每次移動(dòng)的像素就越小，所以函數(shù)執(zhí)行越頻繁；
            //相反，如果函數(shù)間隔時(shí)間越大，動(dòng)畫(huà)會(huì)非常難看（一次移動(dòng)的像素太多）
            this.enterTimer = setInterval(() => {
                if (_v < 250) {
                    _v += 2.5
                } else {
                    _v = 250
                    clearInterval(this.enterTimer)
                    done()
                }
                el.style.opacity = _v
                el.style.transform = `translateY(-${_v}px)`
            }, 3)
        },
        leave: function(el, done) {
            clearInterval(this.enterTimer)
            let _v = 250
            this.leaveTimer = setInterval(() => {
                if (_v > 0) {
                    _v -= 2.5
                } else {
                    _v = 0
                    clearInterval(this.leaveTimer)
                    done()
                }
                el.style.opacity = _v
                el.style.transform = `translateY(-${_v}px)`
            }, 3)
        }
    }
}
</script>

之前一直以為官方價(jià)紹了兩種方式是等價(jià)的，并且兩種方式對(duì)應(yīng)的demo不是等效的，感覺(jué)這是巨大的一個(gè)坑

在地圖上倒好做了，德高百度啥的直接有現(xiàn)成的接口，設(shè)定路徑就行了。

之前整理過(guò)這類問(wèn)題，請(qǐng)先參考： https://zhuanlan.zhihu.com/p/...

(主要就是嘗試用canvas并且我寫(xiě)了一個(gè)簡(jiǎn)單的工具...)

如果還有問(wèn)題，也歡迎進(jìn)一步交流。

Sublime Text 3 配置瀏覽器預(yù)覽路徑 localhost

src="img[nowIndex].src" 一樣的啊

es6:

  var items = document.querySelectorAll("li");
  for(let i = 0; i<items.length;i++){
    items[i].onclick = function(){
      console.log(i)
    } 
  }

es5:

  var items = document.querySelectorAll("li");
  for(var i = 0; i<items.length;i++){
   (function(i){
        items[i].onclick = function(){
      console.log(i)
    } 
   })(i)
  }

for循環(huán)直接就運(yùn)行了跑了6次，等你點(diǎn)擊的時(shí)候i已經(jīng)等于5

axios 的攔截器可以試一下

//添加請(qǐng)求攔截器
axios.interceptors.request.use(config => {
  //在發(fā)送請(qǐng)求之前做某事，比如說(shuō) 設(shè)置loading動(dòng)畫(huà)顯示
  return config
}, error => {
  //請(qǐng)求錯(cuò)誤時(shí)做些事
  return Promise.reject(error)
})

//添加響應(yīng)攔截器
axios.interceptors.response.use(response => {
  //對(duì)響應(yīng)數(shù)據(jù)做些事，比如說(shuō)把loading動(dòng)畫(huà)關(guān)掉
  return response
}, error => {
  //請(qǐng)求錯(cuò)誤時(shí)做些事
  return Promise.reject(error)
})

可以用v-show+vue過(guò)渡動(dòng)畫(huà)，這樣就可以實(shí)現(xiàn)

在顯示動(dòng)畫(huà)中，加上動(dòng)畫(huà)延時(shí)，這樣就不會(huì)出現(xiàn)同步和重疊的情況，
但這樣會(huì)有一種情況就是初始化的時(shí)候會(huì)慢，如果想要解決，還可以初始化后給他們加上一個(gè)class，
然后.fade-enter-active.xxxx 兩個(gè)class都有就加上動(dòng)畫(huà)延時(shí)，transtion-delay，就能解決

this.$nextTick(()=>{

this.$set(......)

})

cocos2d-js

你應(yīng)該把進(jìn)退場(chǎng)動(dòng)畫(huà)放在動(dòng)態(tài)元素上。

<div *ngFor="let item of projects" [@myanim]>
   ...
</div>

一個(gè)想法（實(shí)際是不是這樣做的就不知道了）：每次滾動(dòng)播放一定的幀數(shù)，如果出現(xiàn)連續(xù)滾動(dòng)則要做防抖動(dòng)處理，并根據(jù)滾動(dòng)距離進(jìn)行幀的播放?？淳W(wǎng)站的效果似乎還用了緩動(dòng)函數(shù)，因?yàn)闈L動(dòng)一次的時(shí)候從開(kāi)始到停止并不是很流暢。

原來(lái)這個(gè)原因：

/**
   * 觸摸小配件中
   */
  partTouchMove: function (e) {
    //獲取當(dāng)前小配件的partTouchData
    //let partTouchData = e.currentTarget.dataset.item.partTouchData;
    //獲取當(dāng)前小配件的id
    let id = e.currentTarget.dataset.item.id;
    let partTouchData = this.data.showDogs[id].partTouchData

把

let partTouchData = e.currentTarget.dataset.item.partTouchData;

改為

let partTouchData = this.data.showDogs[id].partTouchData

完美解決?。。?/p>

可能是通過(guò)data-綁定了復(fù)雜數(shù)據(jù)，不斷循環(huán)獲取的時(shí)候，會(huì)嚴(yán)重影響性能。

使用.bind(this)綁定上下文