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 @@
// ? define(factory)
// : ((global = global || self), (global.Scene = factory()))
// })(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) {
// this.pages = []
// this.activeIndex = obj.activeIndex ? obj.activeIndex : 0
// this.options = obj
// this.keyframes = obj.keyframes
// this.initPages(obj.pages)
initEvents(obj)
return this
}
Scene.EventBus = (function () {
function EventBusClass () {
this.msgQueues = {}
}
EventBusClass.prototype = {
// 将消息保存到当前的消息队列中
on: function (msgName, func) {
......@@ -58,8 +65,7 @@ Scene.EventBus = (function () {
}
}
// 将EventBus放到window对象中
const EventBus = new EventBusClass()
var EventBus = new EventBusClass()
return EventBus
})()
Scene.prototype.initPages = function (pages) {
......@@ -69,21 +75,35 @@ Scene.prototype.initPages = function (pages) {
}
return this
}
Scene.prototype.play = function () {
this.pages.forEach(function (item, index) {
let keyframe = this.keyframes[item.component]
$.Velocity(
document.querySelector(keyframe.el),
keyframe.enter.style,
keyframe.enter.options
)
})
Scene.enterAfter = function (obj) {
this.EventBus.emit('enterAfter', obj)
return this
}
Scene.leaveAfter = function (obj) {
this.EventBus.emit('leaveAfter', obj)
return this
}
Scene.playing = function (obj) {
this.EventBus.emit('playing', obj)
return this
}
Scene.prototype.finish = function (page) {
Scene.loaded = function (nextPage) {
this.EventBus.emit('loaded')
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
// })
export default Scene
src/templates/companyCulture/index.vue
......@@ -148,19 +148,19 @@ export default {
on: {
init() {
if (!vm.isEditMode) {
swiperAnimateCache(this); // 隐藏动画元素
swiperAnimate(this); // 初始化完成开始动画
// swiperAnimateCache(this); // 隐藏动画元素
// swiperAnimate(this); // 初始化完成开始动画
}
},
slideChange() {
vm.sliderActiveIndex = this.realIndex;
if (vm.isEditMode) {
$(".ani").css("visibility", "");
// $(".ani").css("visibility", "");
}
},
slideChangeTransitionEnd() {
if (!vm.isEditMode) {
swiperAnimate(this);
// swiperAnimate(this);
}
}
}
......
src/templates/companyCulture/pages/welcome.vue
......@@ -59,21 +59,227 @@ export default {
components: {
Date
},
created() {
// console.log(this.list);
},
mounted() {
this.enter();
},
methods: {
eventChange() {
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() {
return {
currentIndex: "",
date: "2019.07.04",
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