-
實現頁面與頁面間的切換 一般來說要根據布局的結構，分為兩種： 1.移動父容器，改變父容器的坐標 2.移動每個子容器的坐標 改變坐標的處理分為2種： 1.傳統的top，left坐標修改 2.CSS3中的transform屬性 transform屬性向元素應用2D或3D轉換，該屬性允許我們對元素進行旋轉、縮放、移動或傾斜。其中會有一個值translate3d(x,y,z)是用來控制元素的位置在頁面上的三軸的位置的,translate3d這里就指明了3d就是啟用了3d加速，也就是啟動了GPU來處理。查看全部
-
CSS3引入了一個新的屬性Transform: transform 屬性向元素應用 2D 或 3D 轉換，該屬性允許對元素進行旋轉、縮放、移動或傾斜。其中有一個值translate3d(x,y,z) 是用來控制元素的位置在頁面上的三軸的位置的，translate3d這里指明了3d就是啟用了3d加速，即啟動GPU來處理，性能更強； transition可以設置一些具體的參數，比如動畫執行的時間，變化的算法、動畫延時等等。 注意：transform屬性是靜態屬性，不是動畫屬性，一旦寫到style里面，將會直接顯示作用，無任何變化過程。 簡單的一句話描述就是： 通過設置transition的一些參數，讓translate3d這個屬性發生變化。查看全部
-
可以查看全部
-
本課程中做了自適應頁面布局的處理，為了更精確頁面的尺寸，這里采用JavaScript動態計算絕對的尺寸v查看全部
-
一般來說運動的狀態都是需要可控的，這樣才方便我們做進一步的操作。 【animation的暫停方式】 CSS3的animation直接提供一個animation-play-state的樣式來控制動畫的暫停處理。增加一個控制暫停樣式，寫動畫樣式的時候特別注意下不同瀏覽器的兼容性，加上對應的前綴 .pauseWalk { -webkit-animation-play-state: paused; -moz-animation-play-state: paused; } 只需要在對應的有animation動畫人物元素節點上，通過動態增加刪除這個樣式就可以控制這個精靈的開始與暫停了，非常簡單 transition的暫停方式 至于transition，一般來說要暫停的地方都是一開始就程序設定好的目標點，因此這個其實是不需要控制的，這個也沒辦法控制，這個是一個動畫過渡的效果，瀏覽器只提供了一個動畫結束的回調。當然可以有一個變通的辦法，做一個強制改變目標過渡值的處理 如何操作： 具體可以看右邊的代碼塊，暫停方法內transition強制做了一個設置left坐標的處理，達到一個暫停的效果，但是這樣是有問題的，下一次的啟動必須等上一次動畫的時間結束 不難看出animation要比transition強大多了查看全部
-
【給祖先節點上套一個限制顯示區域的節點】 這樣雖然是形成了橫向布局與無縫拼接，不過可視區范圍永遠只能顯示出一個主題頁面的尺寸，所以我們需要再給祖先節點上套一個限制顯示區域的節點 在實現上，通過CSS布局是可以直接處理的。本課程中做了自適應頁面布局的處理，為了更精確頁面的尺寸，這里采用JavaScript動態計算絕對的尺寸查看全部
-
動畫主要知識點查看全部
-
jq回調函數接口 Deferred 步驟： var dtd = $.Deferred(); //創建 dtd.resolve(); //成功 dtd.then() //執行回調查看全部
-
CSS Sprites在國內很多人叫CSS精靈，其實這個技術不新鮮，原理就是：靠不斷的切換圖片讓人感覺視覺上不斷在變化，例如gif動畫之類的效果查看全部
-
頁面布局與切換是一個整體，我們想調用切換的時候，并不關心其內部處理的手段，所以我們只需要提供一個可以調用的接口就可以，新建一個Swipe.js文件，內部定義一個Swipe工廠方法，內部會產生一個swipe的滑動對象，暴露了scrollTo的接口查看全部
-
頁面布局與切換是一個整體，我們想調用切換的時候，并不關心其內部處理的手段，所以我們只需要提供一個可以調用的接口就可以，新建一個Swipe.js文件，內部定義一個Swipe工廠方法，內部會產生一個swipe的滑動對象，暴露了scrollTo的接口查看全部
-
封裝，即隱藏對象的屬性和實現細節，僅對外公開接口。查看全部
-
一、結構的搭建與切換 頁面的橫向布局 頁面之間的卷滾切換效果 頁面切換部分的代碼封裝 二、小男孩的動作實現與封裝 布局與自適應調整 精靈動畫的實現 走路的實現 運動的狀態控制 路徑動畫的坐標設計 三、第一幅圖 太陽的結構與動畫效果 云的結構與動畫效果 四、第二幅圖 頁面布局搭建 開關門效果的實現 燈光處理 燈光效果的實現 人物進出商店的坐標計算 等待取花 鳥動畫的實現 六、第三幅圖 頁面的布局 星星與水波 運動個軌跡處理 等待取花 鳥動畫的實現查看全部
-
一、結構的搭建與切換 頁面的橫向布局 頁面之間的卷滾切換效果 頁面切換部分的代碼封裝 二、小男孩的動作實現與封裝 布局與自適應調整 精靈動畫的實現 走路的實現 運動的狀態控制 路徑動畫的坐標設計 三、第一幅圖 太陽的結構與動畫效果 云的結構與動畫效果 四、第二幅圖 頁面布局搭建 云的結構與動畫效果 四、第二幅圖 頁面布局搭建 開關門效果的實現 燈光處理 燈光效果的實現 人物進出商店的坐標計算 等待取花 鳥動畫的實現 六、第三幅圖 頁面的布局 星星與水波 運動個軌跡處理 等待取花 鳥動畫的實現查看全部
-
這是紀錄哪個節嗎？查看全部
舉報
0/150
提交
取消