不一樣的前端手指操

看見題目可能有點(diǎn)好奇，不過看下去你就知道什么叫手指操了~

目錄

  • 寫在前面（特別注意）

在移動(dòng)端上做動(dòng)畫，一定不能用top,bottom,background-position等元素做動(dòng)畫,不管是JS動(dòng)畫還是CSS動(dòng)畫。主要是瀏覽器重排，重繪，合成等，只能用4個(gè)(需要加translateZ(0)開啟GPU加速)：translate,scale,opacity,rotate。
詳細(xì)資料參考：

<a name="intro"></a>

  • 引言

畢業(yè)季沒事做，一直都對(duì)視差滾動(dòng)感興趣，感覺很新鮮（雖然現(xiàn)在已經(jīng)不火了）不過還是決定試試看，先看看效果。

第一部分

第二部分

第三部分

第四部分

<a name="thory"></a>

  • 原理

用了一點(diǎn)視差滾動(dòng)的效果，可能不明顯，關(guān)于視差滾動(dòng)，與很多資料，本質(zhì)是不同層的移動(dòng)速度不同，比如坐火車時(shí)，遠(yuǎn)處的物體移動(dòng)得慢，近處的物體移動(dòng)的很快，我們就人為的實(shí)現(xiàn)這種速度的差異參考demo。

**參考資料： **

如果再結(jié)合一些動(dòng)畫，就可以得到如下的比較cool的頁面：

參考demo:

<a name="lib"></a>

  • 核心庫

為了實(shí)現(xiàn)上述的效果，選擇了skrollr這個(gè)庫，使用這個(gè)庫，懂CSS就可以玩出這個(gè)效果了，用關(guān)鍵幀加CSS就可以了

<section class="scene1 fullpage" 
            data-6300="transform:translate3d(0,0%,0);display:block"  
            data-10000="transform:translate3d(0,-100%,0);display:block" 
            data-30000="transform:translate3d(0,-100%,0);display:block" 
            data-33000="transform:translate3d(0,-130%,0);display:none">
</section>

總的來說，共使用了

<a name="impl"></a>

  • 實(shí)現(xiàn)
    <a name="keyframe"></a>
    • 關(guān)鍵幀/圖片調(diào)整
    在skrollr初始化之前，需要對(duì)圖片進(jìn)行一些調(diào)整，首先選好了圖片之 后，得保證顯示在手機(jī)上不變形，因而需要根據(jù)不同的手機(jī)屏幕大小調(diào)整 圖片的大小，然后再根據(jù)所得的圖片設(shè)置一下結(jié)束的關(guān)鍵幀。

    background是設(shè)置結(jié)束關(guān)鍵幀
    ratio是設(shè)置背景圖片的比例

$.plug.background(true,".scene1-1",6700,$.plug.ratio(true,1080,1920,".scene1-1"));
$.plug.background(false,".scene2-1",18000,$.plug.ratio(false,4500,1667,".scene2-1"));
$.plug.background(false,".scene2-2",22000,$.plug.ratio(false,4500,1667,".scene2-2"));
$.plug.background(false,".scene3-1",42000,$.plug.ratio(false,3840,2160,".scene3-1"));
$.plug.background(false,".scene3-2",48000,$.plug.ratio(false,3840,2160,".scene3-2"));
$.plug.background(false,".scene4-1",58000,$.plug.ratio(false,2560,1496,".scene4-1"));
$.plug.background(false,".scene4-2",62000,$.plug.ratio(false,2560,1496,".scene4-2"));
$.plug.background(false,".scene5-1",76000,$.plug.ratio(false,2857,1216,".scene5-1"));
$.plug.background(false,".scene6-1",112000,$.plug.ratio(false,800,800,".scene6-1"));
$.plug.background(true,".scenev-1-1",94000,$.plug.ratio(true,600,1200,".scenev-1-1"));
$.plug.background(true,".scenev-1-2",98000,$.plug.ratio(true,600,1200,".scenev-1-2"));
$.plug.background(true,".scenev-1-3",102000,$.plug.ratio(true,600,1200,".scenev-1-3"));

 如下所示，對(duì)于橫向圖片，以手機(jī)高度為準(zhǔn)，先根據(jù)手機(jī)高度設(shè)置圖片高 度，再根據(jù)圖片比例設(shè)置圖片的長度，對(duì)于縱向顯示的圖片，以屏幕寬度為準(zhǔn)，手法類似，代碼非常簡單。
橫向圖片
 (function($){
    function ratio(iswidth,width,height,dom,scale,isback){
        var ratioo=scale||1;
        var ratio=width/height;
        if(iswidth){        
            var wi=window.innerWidth*ratioo;
            var numb=Math.round(wi/ratio);
            var _pxheight=numb+"px";
            document.querySelector(dom).style.height=_pxheight;
            return numb;
        }
        else{
            var he=window.innerHeight*ratioo;
            var numb=Math.round(he*ratio);
            var _pxwidth=numb+"px"; 
            document.querySelector(dom).style.width=_pxwidth;
            return numb;
        }       
}
     if(!$.plug)$.plug={};
     $.plug.ratio=ratio;        
 })($)

一開始確定好容器大小，初始化一些白色的小型div,再通過CSS3動(dòng)畫讓他們不停旋轉(zhuǎn)，即是星星的感覺。
再根據(jù)前景和背景的運(yùn)動(dòng)速度不同，造成視差滾動(dòng)。
對(duì)于動(dòng)畫，大多使用transform:translate3d，且以百分比做動(dòng)畫，
以百分比做動(dòng)畫意味著是以自身元素為參照，不是父級(jí)元素，因而為了避免有些小型元素移動(dòng)100%的距離只相當(dāng)于移動(dòng)了它自身大小的問題，將所有的元素都套在一個(gè)fullpage的div中:

.fullpage{
    width: 100%;
    height: 100%;   
    position: absolute;
    left: 0;
    top:0
}

對(duì)這個(gè)嵌套元素進(jìn)行移動(dòng)，下面是各背景與前景，使他們以不同速度移動(dòng)，可以通過設(shè)置不同的data-number值實(shí)現(xiàn)。

前景
背景
前景
背景
<a name="spritesheet"></a>
  • spritesheet

對(duì)游戲制作的同學(xué)不會(huì)肯定不會(huì)陌生

行走

這樣的代碼一大堆，我貼個(gè)自己實(shí)現(xiàn)的，簡單再說一下
對(duì)于這個(gè)5793*158的spritesheet，如果在手機(jī)上顯示高度為100px，則寬度為5793/1.58=3666px，則每次spritesheet移動(dòng)的距離為3666px/36(動(dòng)畫一共有36幀）=102px，對(duì)應(yīng)下面的JS代碼中的interval參數(shù)，同時(shí)為了停止有個(gè)緩沖，加了個(gè)停止幀stopframe參數(shù)。

(function($){
        function animate(totaltime,dom,parts,interval,stopframe){
                var temp=0;
                var stop_flag=false;
                var timer=null;
                    var num=temp*(interval);
                    $(dom).css({"background-position-x":num+"px"});
                    temp++;
                    if(stop_flag&&temp===stopframe){
                        clearInterval(timer),timer=null
                        stop_flag=false;
                    }
                    if(temp===parts)temp=0;
                
                return {
                    animating:function(){return timer!==null?true:false},
                    stop:function(va){
                        stop_flag=true;
                        //clearInterval(timer),timer=null
                    },
                    resume:function(){
                            if(timer!==null)return
                            var str=$(dom).css("background-position-x");
                            var matched=str.match(/-?[0-9]+/);
                            var num=parseInt(matched[0]);
                            temp=num/interval;
                            timer=setInterval(function(){
                            var num=temp*(interval);
                            $(dom).css({"background-position-x":num+"px"});
                            temp++;
                            if(stop_flag&&temp===stopframe){
                                clearInterval(timer),timer=null
                                stop_flag=false;
                            }
                            if(temp===parts)temp=0
                        },totaltime/parts);
                    }
                    
                }
                //$(dom)
            }       
            if(!$.plug)$.plug={};
            $.plug.animate=animate;
    
   })($)

<a name="progressbar"></a>

  • progressbar
    progressbar的實(shí)現(xiàn)使用了2個(gè)半圓的形式
    利用border-radius：50%做一個(gè)圓，再利用clip: rect(0,auto,auto,50px)裁切為半圓。

右半圓旋轉(zhuǎn)
之后再從垂直正中開始裁切clip: rect(0,auto,auto,50px);
clip裁切

左半圓類似:
左半圓旋轉(zhuǎn)

clip裁切

將2個(gè)區(qū)域合并：
餅圖效果

加一個(gè)背景色相同的mask覆蓋在中間，這樣的好處是圓環(huán)寬度可以方便調(diào)整：
加個(gè)背景顏色相同的覆蓋在中間

 之后就可以通過代碼設(shè)置其百分比：
 ```js
          (function($){
              function circleprogress(dom,value){                                    
                $(dom).each(function(index, el) {
                var num = value * 3.6;
                num=Math.round(num);
                if (num<=180) {
                    $(this).find('.right').css('-webkit-transform', "rotate(" + num + "deg) translateZ(0px)");
                    $(this).find('.right').css('transform', "rotate(" + num + "deg) translateZ(0px)");
                    $(this).find('.left').css('-webkit-transform', "rotate("+0+ "deg) translateZ(0px)");
                    $(this).find('.left').css('transform', "rotate("+0+ "deg) translateZ(0px)");
                } else {
                    $(this).find('.right').css('-webkit-transform', "rotate(180deg) translateZ(0px)");
                    $(this).find('.left').css('-webkit-transform', "rotate(" + (num - 180) + "deg) translateZ(0px)");
                    $(this).find('.right').css('transform', "rotate(180deg) translateZ(0px)");
                    $(this).find('.left').css('transform', "rotate(" + (num - 180) + "deg) translateZ(0px)");
                };
            });
        }       
        if(!$.plug)$.plug={};
        $.plug.circleprogress=circleprogress;

})($)

    在滑動(dòng)的過程中，配置好滑動(dòng)的區(qū)間即可：
    ```js
                    if(data.curTop>=20000 && data.curTop<25000){
                            var num=Math.round((data.curTop-20000)/55);
                            $('.circle-1').find('span.value').text(num);
                            $.plug.circleprogress('.circle-1',num);
                        }   
    ```
* * *
   
<a name="problem"></a>
* ##### 可能會(huì)遇到的問題
     對(duì)于配置稍低的手機(jī)，比如我的4S，在場景越來越多，圖片越來越多的情況下，不管是在微信中打開還是原生瀏覽器中打開，都會(huì)把微信和瀏覽器弄崩潰。。期間嘗試了各種優(yōu)化，把所有關(guān)于**layout**和**paint**的動(dòng)畫部分都替換，情況稍微好一些，但是還是有崩潰的現(xiàn)象。最后發(fā)現(xiàn)網(wǎng)頁加載時(shí)要對(duì)所有的場景進(jìn)行渲染，即便這些場景一開始并不需要出現(xiàn)。所以根據(jù)動(dòng)畫情況，將需要出現(xiàn)的場景動(dòng)態(tài)顯示，且在css中加入下面的語句,讓所有場景及信息一開始都不渲染。
```css
      .scene1,.scene2,.scene3,.scene4,.scene5,.scene6,.infomation{
        display: none;
        }

最后根據(jù)skrollr的值來選擇顯示的場景。

通過這樣的做，我的4s終于再也不崩潰了，即便在有些低配手機(jī)還是有點(diǎn)卡。

<a name="tool"></a>

  • 相關(guān)工具

再貼幾個(gè)圖像處理工具，都是在線的，相當(dāng)不錯(cuò)

這些圖像處理網(wǎng)站后臺(tái)可能用的的是[imagemagick](http://www.imagemagick.org/script/index.php)（瞎猜的）
  • 作為一個(gè)程序員如何找圖片及配色
    • 圖片:

都是免費(fèi)無水印，但是還是自己用就好了

  • 配色:

本人喜歡flat扁平化的風(fēng)格，所以都是相關(guān)的顏色

先在上面的網(wǎng)站找些喜歡的顏色 然后再去下面的網(wǎng)站生成相關(guān)的互補(bǔ)色等
colorhexa：顏色分析，輸入一個(gè)顏 色，分析其各屬性
paletton：相當(dāng) 好用的選色工具，還可以看效果

<a name="visit"></a>

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 1. tab列表折疊效果 html: 能源系統(tǒng)事業(yè)部 崗位名稱： 工作地點(diǎn) 崗位名...
    lilyping閱讀 2,008評(píng)論 0贊 1
  • <a name='html'>HTML</a> Doctype作用？標(biāo)準(zhǔn)模式與兼容模式各有什么區(qū)別? （1）、<...
    clark124閱讀 3,817評(píng)論 1贊 19
  • 前幾天上?；貋硪粋€(gè)牧師在教會(huì)講道，我調(diào)休了兩三天就去了。坐在我左邊的是一個(gè)老奶奶，聽的很是認(rèn)真，邊聽邊記筆記。不知...
    叫我松哥閱讀 430評(píng)論 0贊 1
  • 聽了宇彤老師講的胸腹式聯(lián)合呼吸法才發(fā)現(xiàn)，無論以前自己怎么努力都沒有成效是因?yàn)闆]有找到專業(yè)的方法，真是方法不對(duì)努...
    瑗澤媽媽閱讀 248評(píng)論 0贊 0
  • 世界上只有一種真正的英雄主義，那就是在認(rèn)清生活的真相后依然熱愛生活。 那日從同衡出來，趕上了高峰期的北京地鐵。 爆...
    兔子王粥粥閱讀 239評(píng)論 0贊 0

友情鏈接更多精彩內(nèi)容