Skip to content

visualcloud / Vmatrix-template

Go to a project
Commit 586a1d21 by hank
Options

动画拆分

parent d14994e7
Showing with 248 additions and 22 deletions
src/framework/utils/sence.js
...@@ -5,19 +5,26 @@ ...@@ -5,19 +5,26 @@
// ? define(factory) // ? define(factory)
// : ((global = global || self), (global.Scene = factory())) // : ((global = global || self), (global.Scene = factory()))
// })(this, function () { // })(this, function () {
function initEvents (obj, vm) {
// obj = obj || {}
// obj.enterAfter && obj.enterAfter()
// obj.loaded && obj.loaded()
// obj.finish && obj.finish()
// obj.playing && obj.playing()
}
var Scene = function (obj) { var Scene = function (obj) {
// this.pages = [] // this.pages = []
// this.activeIndex = obj.activeIndex ? obj.activeIndex : 0 // this.activeIndex = obj.activeIndex ? obj.activeIndex : 0
// this.options = obj // this.options = obj
// this.keyframes = obj.keyframes // this.keyframes = obj.keyframes
// this.initPages(obj.pages) // this.initPages(obj.pages)
initEvents(obj)
return this return this
} }
Scene.EventBus = (function () { Scene.EventBus = (function () {
function EventBusClass () { function EventBusClass () {
this.msgQueues = {} this.msgQueues = {}
} }
EventBusClass.prototype = { EventBusClass.prototype = {
// 将消息保存到当前的消息队列中 // 将消息保存到当前的消息队列中
on: function (msgName, func) { on: function (msgName, func) {
...@@ -58,8 +65,7 @@ Scene.EventBus = (function () { ...@@ -58,8 +65,7 @@ Scene.EventBus = (function () {
} }
} }
// 将EventBus放到window对象中 var EventBus = new EventBusClass()
const EventBus = new EventBusClass()
return EventBus return EventBus
})() })()
Scene.prototype.initPages = function (pages) { Scene.prototype.initPages = function (pages) {
...@@ -69,21 +75,35 @@ Scene.prototype.initPages = function (pages) { ...@@ -69,21 +75,35 @@ Scene.prototype.initPages = function (pages) {
} }
return this return this
} }
Scene.prototype.play = function () { Scene.enterAfter = function (obj) {
this.pages.forEach(function (item, index) { this.EventBus.emit('enterAfter', obj)
let keyframe = this.keyframes[item.component] return this
$.Velocity( }
document.querySelector(keyframe.el), Scene.leaveAfter = function (obj) {
keyframe.enter.style, this.EventBus.emit('leaveAfter', obj)
keyframe.enter.options return this
) }
}) Scene.playing = function (obj) {
this.EventBus.emit('playing', obj)
return this return this
} }
Scene.prototype.finish = function (page) { Scene.loaded = function (nextPage) {
this.EventBus.emit('loaded')
return this return this
} }
Scene.prototype.tricks = function (fuc) {
function next (done) {
}
function loaded (page) {
}
function done () {}
if (typeof func === 'function') {
fuc(loaded, next)
}
return this
}
// return Scene // return Scene
// }) // })
export default Scene export default Scene
src/templates/companyCulture/index.vue
...@@ -148,19 +148,19 @@ export default { ...@@ -148,19 +148,19 @@ export default {
on: { on: {
init() { init() {
if (!vm.isEditMode) { if (!vm.isEditMode) {
swiperAnimateCache(this); // 隐藏动画元素 // swiperAnimateCache(this); // 隐藏动画元素
swiperAnimate(this); // 初始化完成开始动画 // swiperAnimate(this); // 初始化完成开始动画
} }
}, },
slideChange() { slideChange() {
vm.sliderActiveIndex = this.realIndex; vm.sliderActiveIndex = this.realIndex;
if (vm.isEditMode) { if (vm.isEditMode) {
$(".ani").css("visibility", ""); // $(".ani").css("visibility", "");
} }
}, },
slideChangeTransitionEnd() { slideChangeTransitionEnd() {
if (!vm.isEditMode) { if (!vm.isEditMode) {
swiperAnimate(this); // swiperAnimate(this);
} }
} }
} }
......
src/templates/companyCulture/pages/welcome.vue
...@@ -59,21 +59,227 @@ export default { ...@@ -59,21 +59,227 @@ export default {
components: { components: {
Date Date
}, },
created() {
// console.log(this.list);
},
mounted() {
this.enter();
},
methods: { methods: {
eventChange() { eventChange() {
Scene.EventBus.emit("change", { aa: 12 }); Scene.EventBus.emit("change", { aa: 12 });
this.leave()
},
enter() {
var countEnterTime = 0
this.keyframes.map(item => {
countEnterTime += item.enter.options.duration + item.enter.options.delay
item.enterBefore &&
$(item.el)
.velocity(item.enterBefore.style, item.enterBefore.options)
.velocity(item.enter.style, item.enter.options);
});
console.log(countEnterTime, 'countEnterTime');
// this.keyframes.map(item => {
// item.enter && $(item.el).velocity(item.enter.style, item.enter.options);
// });
},
leave() {
this.keyframes.map(item => {
item.leave && $(item.el).velocity("reverse");
});
} }
}, },
created() {
// console.log(this.list);
},
mounted() {},
data() { data() {
return { return {
currentIndex: "", currentIndex: "",
date: "2019.07.04", date: "2019.07.04",
img: "", img: "",
currentIndex: "" currentIndex: "",
keyframes: [
{
el: ".sanjiaoBg",
style: {
opacity: 0,
translateX: "2000px"
},
options: {
delay: 0,
duration: 0
},
enterBefore: {
style: {
opacity: 0,
translateX: "2000px"
},
options: {
delay: 0,
duration: 0
}
},
enter: {
style: {
opacity: 1,
translateX: "0px"
},
options: {
delay: 0,
duration: 1000
}
},
leave: {
style: {
opacity: 0,
translateX: "2000px"
},
options: {
delay: 1000,
duration: 1000
}
}
},
{
el: ".en_name",
style: {
opacity: 0,
scale: "0.3"
},
options: {
delay: 2000,
duration: 3000
},
enterBefore: {
style: {
opacity: 0,
scale: "0.3"
},
options: {
delay: 2000,
duration: 3000
}
},
enter: {
style: {
opacity: 0.15,
scale: 1
},
options: {
delay: 2000,
duration: 3000,
loop: true
}
},
leave: {
style: {},
options: {}
}
},
{
el: ".en_name .left-word",
style: {
opacity: 0,
translateX: "-2000px"
},
options: {
delay: 0,
duration: 0
},
enterBefore: {
style: {
opacity: 0,
translateX: "-2000px"
},
options: {
delay: 0,
duration: 0
}
},
enter: {
style: {
opacity: 1,
translateX: "0px"
},
options: {
delay: 500,
duration: 1000
}
},
leave: {
style: {},
options: {}
}
},
{
el: ".en_name .right-word",
style: {
opacity: 0,
translateX: "2000px"
},
options: {
delay: 0,
duration: 0
},
enterBefore: {
style: {
opacity: 0,
translateX: "2000px"
},
options: {
delay: 0,
duration: 0
}
},
enter: {
style: {
opacity: 1,
translateX: "0px"
},
options: {
delay: 500,
duration: 1000
}
},
leave: {
style: {},
options: {}
}
},
{
el: ".zh_name",
style: {
opacity: 0,
scale: "0.3"
},
options: {
delay: 0,
duration: 0
},
enterBefore: {
style: {
opacity: 0,
scale: "0.3"
},
options: {
delay: 0,
duration: 0
}
},
enter: {
style: {
opacity: 1,
scale: "1"
},
options: {
delay: 3000,
duration: 1000
}
},
leave: {
style: {},
options: {}
}
}
]
}; };
} }
}; };
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment