Skip to content

visualcloud / Vmatrix-template

Go to a project
Commit 45386131 by hank
Options

anime

parent 90085367
Showing with 267 additions and 77 deletions
package.json
......@@ -14,11 +14,12 @@
"build": "node build/build.js"
},
"dependencies": {
"animejs": "^3.1.0",
"axios": "^0.18.0",
"babel-runtime": "^6.26.0",
"svg-sprite-loader": "^4.1.6",
"node-sass": "^4.9.0",
"sass-loader": "^7.0.1",
"svg-sprite-loader": "^4.1.6",
"swiper": "^4.5.0",
"vue": "^2.5.2",
"vue-awesome-swiper": "^3.1.3",
......
src/templates/listingInformation/index.vue
<template>
<div class>
<swiper :options="swiperOption"
:class="'glob-container'"
ref="mySwiper"
@someSwiperEvent="callback"
style="width:1920px;height:1080px;">
<swiper-slide style="transform: translate3d(0,0,0)"
class="ani ant"
v-for="(page, index) in pages"
:key="index">
<component :is="page.component"
:schemaData="pages[index].schemaData"
:isEditMode="isEditMode"
:cancelEdit.sync="cancelEdit"
:page="index"
:activeIndex="sliderActiveIndex"></component>
<swiper
:options="swiperOption"
:class="'glob-container'"
ref="mySwiper"
@someSwiperEvent="callback"
style="width:1920px;height:1080px;"
>
<swiper-slide
style="transform: translate3d(0,0,0)"
class="ani"
v-for="(page, index) in pages"
:key="index"
>
<component
:is="page.component"
v-if="index === sliderActiveIndex"
:schemaData="pages[index].schemaData"
:isEditMode="isEditMode"
:cancelEdit.sync="cancelEdit"
:page="index"
:activeIndex="sliderActiveIndex"
></component>
</swiper-slide>
</swiper>
<svg viewBox="0 0 1920 1080"
class="svg-filters">
<svg viewBox="0 0 1920 1080" class="svg-filters">
<title>Animated clip-path SVG</title>
<defs>
<filter id="ant"
x="0"
y="0"
width="1"
height="1">
<feGaussianBlur in="SourceGraphic"
stdDeviation="10" />
<filter id="ant" x="0" y="0" width="1" height="1">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" />
<clipPath id="cd-image-122">
<circle id="cd-circle-1"
cx="110"
cy="400"
r="60"></circle>
<circle id="cd-circle-1" cx="1920" cy="1080" r="1920" />
</clipPath>
</filter>
<clipPath id="cd-image-1">
<circle id="cd-circle-1"
cx="0"
cy="0"
r="60"></circle>
<clipPath id="cd-image-1" clipPathUnits="userSpaceOnUse">
<circle id="cd-circle-1" cx="0" cy="1080" r="2920" />
</clipPath>
<mask id="mask-img-1" maskContentUnits="objectBoundingBox">
<circle id="cd-circle-1" fill="white" cx="0" cy="0" r="1000" />
</mask>
</defs>
<!-- <image height="800px"
<image height="800px"
width="1400px"
clip-path="url(#cd-image-1)"
xlink:href="http://ue.qzone.qq.com/janilydemo/mask/clippath/img.jpg"></image> -->
mask="mask-img-1"
xlink:href="http://ue.qzone.qq.com/janilydemo/mask/clippath/img.jpg"></image>
</svg>
</div>
</template>
......@@ -217,8 +216,13 @@ export default {
opacity: 0;
}
.ant {
clip-path: url(#cd-image-1);
// clip-path: circle(30%);
// clip-path: url(#cd-image-1);
// clip-path: circle(30%);
mask-image: url(#mask-img-1);
// mask-size:10%;
mask-type:alpha;
// mask-clip: view-box;
}
}
......@@ -226,16 +230,26 @@ export default {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
}
#cd-image-1 circle {
animation: visible-clippath 3s ease-in-out forwards infinite;
opacity: 0;
// animation: visible-clippath 1s ease-out forwards ;
opacity: 1;
}
#mask-img-1 circle {
// animation: visible-clippath 1s ease-out forwards ;
opacity: 1;
}
@keyframes visible-clippath {
to {
from {
r: 1920;
opacity: 1;
}
to {
r: 0;
opacity: 1;
}
}
</style>
<style>
......
src/templates/listingInformation/pages/rentHouse3.vue
<template>
<!-- animated bgliner -->
<div class="container infinite">
<div class="container" :class="'ant'" @click="reLeave">
<!-- <div class="ani sanjiaoBg " swiper-animate-effect="fadeInRightBig" swiper-animate-duration="0.5s" swiper-animate-delay="0s"></div>
<div class="title">{{getValue('companyName')}}</div>-->
<div class="decoration"></div>
<div class="house-list">
<swiper :options="swiperOption"
ref="mySwiper"
style=" width:731px;height:1080px;">
<swiper-slide style="transform: translate3d(0,0,0)"
v-for="(item, index) in dataList"
:key="index">
<img :src="item"
alt />
<div class="house-list" ref="house-list">
<swiper :options="swiperOption" ref="mySwiper" style=" width:731px;height:1080px;">
<swiper-slide
style="transform: translate3d(0,0,0)"
v-for="(item, index) in dataList"
:key="index"
>
<img :src="item" alt />
</swiper-slide>
</swiper>
</div>
<div class="right-container">
<div class="center-v">
<div class="title">合租 | 彩虹新城·两居室·精装修·南</div>
<div class="price">
<div class="title" ref="title">合租 | 彩虹新城·两居室·精装修·南</div>
<div class="price" ref="price">
¥
<span class="number">2100</span>
<span class="uint">/月</span>
<div class="mirror-light"></div>
</div>
<div class="surrounding"
zh="周边设施">SURROUNDING FACILITIES</div>
<div class="feature-list">
<div class="surrounding" ref="surrounding" zh="周边设施">SURROUNDING FACILITIES</div>
<div class="feature-list" ref="feature-list">
<div class="feature-item">
<img class="icon"
src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/%E5%9C%B0%E9%93%81.png"
alt />
<img
class="icon"
src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/%E5%9C%B0%E9%93%81.png"
alt
/>
地铁四号线枣园站 260米
</div>
<div class="feature-item feature-item-right">
<img class="icon"
src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/%E5%85%AC%E5%9B%AD.png"
alt />
<img
class="icon"
src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/%E5%85%AC%E5%9B%AD.png"
alt
/>
地铁四号线枣园站 260米
</div>
<div class="feature-item">
<img class="icon"
src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/%E5%95%86%E5%9C%BA.png"
alt />
<img
class="icon"
src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/%E5%95%86%E5%9C%BA.png"
alt
/>
地铁四号线枣园站 260米
</div>
<div class="feature-item feature-item-right">
<img class="icon"
src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/%E5%8C%BB%E9%99%A2.png"
alt />
<img
class="icon"
src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/%E5%8C%BB%E9%99%A2.png"
alt
/>
地铁四号线枣园站 260米
</div>
</div>
<div class="high-light">
<div class="high-light-item">
<div class="high-light-item" ref="high-light-item">
<div class="high-light-item-top">20m²</div>
<div class="high-light-item-bottom">面积</div>
</div>
<div class="high-light-item">
<div class="high-light-item" ref="high-light-item">
<div class="high-light-item-top">阳台</div>
<div class="high-light-item-bottom">面积</div>
</div>
<div class="high-light-item">
<div class="high-light-item" ref="high-light-item">
<div class="high-light-item-top">3/10</div>
<div class="high-light-item-bottom">楼层</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import methods from "../methods";
import Scene from "@/framework/utils/sence";
import anime from "animejs/lib/anime.es.js";
export default {
name: "welcome",
props: ["schemaData", "page", "isEditMode", "cancelEdit"],
......@@ -88,8 +94,176 @@ export default {
},
created() {
// console.log(this.list);
window.test = this;
},
methods: {
reLeave() {
this.leave();
},
leave() {
console.log("leave");
// anime({
// targets: "#cd-image-1 circle",
// duration: 3000,
// r: [2920, 0],
// easing: "linear"
// });
var PromiseAll = [
anime({
targets: "#cd-image-1 circle",
duration: 2000,
r: [2920, 0],
easing: "easeOutQuad"
}),
anime({
targets: "#mask-img-1 circle",
duration: 2000,
r: [2920, 0],
easing: "easeOutQuad"
})
];
return Promise.all(PromiseAll);
},
enter() {
var PromiseAll = [
anime({
targets: this.$refs["house-list"],
translateX: 0,
opcity: 1,
duration: 1000
}),
anime({
targets: this.$refs["title"],
translateX: 0,
opcity: 1,
delay: 1000,
duration: 500,
easing: "easeInOutQuad"
}),
anime({
targets: this.$refs["price"],
translateX: 0,
opcity: 1,
duration: 1000,
delay: 1200,
easing: "easeInOutQuad"
}),
anime({
targets: this.$refs["surrounding"],
translateX: 0,
opcity: 1,
duration: 1000,
delay: 1500,
easing: "easeInOutQuad"
}),
anime({
targets: this.$refs["feature-list"],
translateX: 0,
opcity: 1,
duration: 1000,
delay: 1800,
easing: "easeInOutQuad"
}),
anime({
targets: ".high-light-item",
translateY: 0,
opcity: 1,
duration: 1000,
// delay: anime.stagger(1000),
delay: 2000,
easing: "easeInOutQuad"
})
];
return Promise.all(PromiseAll);
},
enterBefore() {
var els = [
".house-list",
".center-v .title",
".price",
".surrounding",
".feature-list",
".high-light .high-light-item"
];
anime({
targets: "#cd-image-1 circle",
duration: 0,
r: [0, 2920]
});
anime({
targets: this.$refs["house-list"],
translateX: -1000,
opcity: 0,
duration: 0
});
anime({
targets: this.$refs["title"],
translateX: 2000,
opcity: 0,
duration: 0
});
anime({
targets: this.$refs["price"],
translateX: 2000,
opcity: 0,
duration: 0
});
anime({
targets: this.$refs["surrounding"],
translateX: 2000,
opcity: 0,
duration: 0
});
anime({
targets: this.$refs["feature-list"],
translateX: 2000,
opcity: 0,
duration: 0
});
anime({
targets: ".high-light-item",
translateY: 1000,
opcity: 0,
duration: 0
});
setTimeout(() => {
this.enter();
}, 1000);
// anime.set(els[1], {
// translateX: () => 1000,
// opcity: () => 0
// })
// anime.set(els[2], {
// translateX: () => 1000,
// opcity: () => 0
// })
// anime.set(els[3], {
// translateX: () => 1000,
// opcity: () => 0
// })
// anime.set(els[4], {
// translateX: () => 1000,
// opcity: () => 0
// })
// anime.set(els[0], {
// translateX: -1000
// })
// anime.set(els[0], {
// translateX: -1000
// })
},
enterAfter() {
this.timer = setTimeout(() => {
Scene.leaveBefore();
clearTimeout(this.timer);
}, 10000);
}
},
mounted() {
this.enterBefore();
},
mounted() {},
data() {
return {
currentIndex: "",
......@@ -100,13 +274,14 @@ export default {
],
swiperOption: {
effect: "slider",
effect: "fade",
speed: 1000,
loop: true,
autoplay: {
delay: 5000
}
}
},
isLeave: false
};
}
};
......@@ -214,7 +389,7 @@ export default {
.title {
font-size: 66px;
line-height: 87px;
color: rgba(51,51,51,0.8);
color: rgba(51, 51, 51, 0.8);
font-weight: bold;
letter-spacing: 0px;
}
......
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