6-2 小女孩动作分解

/** * 慕课网特制 * 圣诞主题效果 * @type {Object} */ /** * 中间调用 */ var Christmas = function() { //页面容器元素 var $pageB = $(".page-b"); //构建第二个场景页面对象 new pageB($pageB); }; $(function() { $("button").on("click", function() { //圣诞主题效果，开始 Christmas() }) })

/** * 第二副场景页面 * */ function pageB(element, pageComplete) { //女孩 var $girl = element.find(".girl"); var animationEnd = "animationend webkitAnimationEnd" /** * 小女孩动作 * @return {[type]} [description] */ var girlAction = { //小女起立 standUp: function() { var dfd = $.Deferred(); //起立 setTimeout(function(){ $girl.addClass("girl-standUp"); },200) //抛书 setTimeout(function(){ $girl.addClass("girl-throwBook"); dfd.resolve() },500) return dfd; }, //走路 walk: function(callback) { //? }, //停止走路 stopWalk: function() { $girl.addClass("walk-stop") .removeClass("girl-standUp") .removeClass("girl-walk") .removeClass("girl-throwBook") .addClass("girl-stand") }, //选择3d choose: function(callback) { $girl.addClass("girl-choose") .removeClass("walk-stop"); $girl.one(animationEnd, function() { callback(); }) }, //泪奔 weepWalk: function(callback) { $girl.addClass("girl-weep"); $girl.transition({ "left": "7rem" }, 1000, "linear", function() { $girl.addClass("walk-stop").removeClass("girl-weep") callback(); }) }, //拥抱 hug: function() { $girl.addClass("girl-hug").addClass("walk-run") } } girlAction .standUp() .then(function() { //女孩停止走路 return girlAction.stopWalk(); }) .then(function() { //女孩走路 return girlAction.walk(); }) .then(function(){ //选择 girlAction.choose(function() { //继续走路 girlAction.weepWalk(function() { //拥抱 girlAction.hug(); }) }) }) }

*{ margin: 0; padding: 0; } .container { width: 100%; height: 100%; position: relative; overflow: hidden; } .bg-adaptive { background-size: 100% 100%; }

.container .page-b { width : 100%; height : 100%; background-image: url("http://img1.sycdn.imooc.com//565d09fa000145a614410901.png"); position: absolute; z-index: 40; } /******************************************************** 小女孩动作 **********************************************************/ /** * 小女孩看书 */ .girl { width: 3.5rem; height: 4.06rem; position: absolute; z-index: 10; left: 1rem; top: 3.2rem; background: url(http://img1.sycdn.imooc.com//565d09e50001156273510407.png); background-size: 2100% 100%; } /** * 起身 */ .girl-standUp { left: 1.2rem; -webkit-animation: standUp 200ms steps(3, start) forwards; -moz-animation: standUp 200ms steps(3, start) forwards; } @-webkit-keyframes standUp { 0% { background-position: 0% 100%; } 100% { background-position: -300% 100%; top: 4rem; } } @-moz-keyframes standUp { 0% { background-position: 0% 100%; } 100% { background-position: -300% 100%; top: 4rem; } } /** * 抛书动作 */ .girl-throwBook { top: 4rem; left: 0.5rem; -webkit-animation: throwBook 300ms steps(2, start) forwards; -moz-animation: throwBook 300ms steps(2, start) forwards; } @-webkit-keyframes throwBook { 0% { background-position: -300% 100%; } 100% { background-position: -500% 100%; } } @-moz-keyframes throwBook { 0% { background-position: -300% 100%; } 100% { background-position: -500% 100%; } } /** * 小女孩走路 */ .girl-walk { left: 1rem; -webkit-animation: girlWalk 900ms steps(4, start) infinite; -moz-animation: girlWalk 900ms steps(4, start) infinite; } @-webkit-keyframes girlWalk { 0% { background-position: -500% 100%; } 100% { background-position: -900% 100%; } } @-moz-keyframes girlWalk { 0% { background-position: -500% 100%; } 100% { background-position: -900% 100%; } } /** * 站立动作 */ .girl-stand { top: 4rem; background-position: -1000% 100%; } /** * 小女孩选择3d选择 */ .girl-choose { -webkit-animation: girlChoose 2000ms steps(2, end) forwards; -moz-animation: girlChoose 2000ms steps(2, end) forwards; } @-webkit-keyframes girlChoose { 0% { background-position: -1000% 100%; } 100% { background-position: -1200% 100%; } } @-moz-keyframes girlChoose { 0% { background-position: -1000% 100%; } 100% { background-position: -1200% 100%; } } /** * 流泪奔跑 */ .girl-weep { -webkit-animation: girlWeep 450ms steps(4, end) forwards infinite; -moz-animation: girlWeep 450ms steps(4, end) forwards infinite; } @-webkit-keyframes girlWeep { 0% { background-position: -1300% 100%; } 100% { background-position: -1700% 100%; } } @-moz-keyframes girlWeep { 0% { background-position: -1300% 100%; } 100% { background-position: -1700% 100%; } } /** * 女孩拥抱 */ .girl-hug { -webkit-animation: girlHug 450ms steps(3, end) forwards; -moz-animation: girlHug 450ms steps(3, end) forwards; } @-webkit-keyframes girlHug { 0% { background-position: -1700% 100%; } 100% { left: 7.85rem; background-position: -2000% 100%; } } @-moz-keyframes girlHug { 0% { background-position: -1700% 100%; } 100% { left: 7.85rem; background-position: -2000% 100%; } }