利用 WAAPI 实现百叶窗切页效果

实现效果

在 CodePen 上查看

在 Github 上查看

简单思路

复制要切页的节点，利用 CSS 的 clip-path 属性对节点进行裁剪，将节点分成多个部分，每个部分分成上下两块（因为需要上下两块向中间扭曲变换），给各个块设置不同延时的平移旋转扭曲变换动画效果即可。

代码实现

const fronts = document.querySelectorAll('.front')
const backs = document.querySelectorAll('.back')
const n = fronts.length
const m = n / 2
const player = []const keyframes = (num, n, isFront, isUp) => [{transform: isFront? 'rotateY(0deg) skewY(0deg)': `rotateY(-120deg) skewY(${isUp ? '' : '-'}30deg) translateX(${100 / n}%)`,transformOrigin: `${(100 / n) * (num + 1)}%`,},{transform: isFront? `rotateY(120deg) skewY(${isUp ? '-' : ''}30deg) translateX(-${100 / n}%)`: 'rotateY(0deg) skewY(0deg)',transformOrigin: `${(100 / n) * num}%`,},
]const options = {duration: 1000,fill: 'both',
}const playAll = () => {player.forEach(value => {value.play()})
}for (let i = 0; i < n; i++) {const j = Math.floor(i / 2)fronts[i].style.clipPath = `inset(${i % 2 == 0 ? '0%' : '50%'} ${Math.floor(100 - (100 / m) * (j + 1))}% ${i % 2 != 0 ? '0%' : '50%'} ${Math.floor((100 / m) * j)}%)`backs[i].style.clipPath = `inset(${i % 2 == 0 ? '0' : '50%'} ${Math.floor(100 - (100 / m) * (j + 1))}% ${i % 2 != 0 ? '0%' : '50%'} ${Math.floor((100 / m) * j)}%)`player.push(new Animation(new KeyframeEffect(fronts[i], keyframes(j, m, true, i % 2 == 0), {...options,iterations: 0.75,delay: (j < m / 2 ? m / 2 - 1 - j : j - m / 2) * 200,}),),)player.push(new Animation(new KeyframeEffect(backs[i], keyframes(j, m, false, i % 2 == 0), {...options,delay: (j < m / 2 ? m / 2 - 1 - j : j - m / 2) * 200,}),),)
}playAll()

利用 WAAPI 实现百叶窗切页效果相关推荐

ViewPager、Fragment和TabLayout实现切页效果
文章目录 ViewPager.Fragment和TabLayout实现切页效果 ViewPager.Fragment和TabLayout实现切页效果不会上传动图,心里哭唧唧.但是是完整代码!新建一个 ...
android UI Tab切页效果总结
2019独角兽企业重金招聘Python工程师标准>>> 目前市面上APP 切页效果有两类(just android) 1.底部Tab点击不同的按钮来切换页面 && 滑 ...
android 辅助功能翻页,Android利用悬浮按钮实现翻页效果
今天给大家分享下自己用悬浮按钮点击实现翻页效果的例子. 首先,一个按钮要实现悬浮,就要用到系统顶级窗口相关的WindowManager,WindowManager.LayoutParams.那么在An ...
利用CSS，实现翻页效果
利用css3的3d效果,实现一个简单的翻页器: <!DOCTYPE html> <html lang="en"> <head><meta ...
Android 上实现像微信一样的用Fragment来实现的Tab切页效果提供源码下载
网有不少的例子,但是要么是像微信一样可是没有使用Fragment实现,要么是只实现了一个很简单的切换,没有下面的菜单页.这个例子有实现了,我觉得暂时够我用了 ##实现类: + MainTabFragm ...
launcher切页动画
launcher切页动画刚工作的时候,还是launcher4.4,好像有很多切页特效可以选,重写切页特效类可以自己实现切页效果. 太久不搞launcher,忘记在哪实现切页特效了,比如什么外盒子.内 ...
html表格翻页简单,利用jQuery实现一个简单的表格上下翻页效果
前言本文主要介绍的是利用jQuery实现一个简单的表格上下翻页效果,注:实现原理与轮播图相似.下面话不多说,来看看详细的实现方法吧. html: 日期参与团购场次团购结果当前状态 02.08 第一 ...
[重磅] 让HTML5达到原生的体验系列之中的一个避免切页白屏
非常多人都想.甚至曾使用HTML5开发跨平台App.而且想达到原生App的体验. 最后的结果都是无奈的放弃.HTML5貌似美好,但坑太多.想做到原生App的体验差点儿不可为. 也曾有过著名的faceb ...
[重磅] 让HTML5达到原生的体验系列之一避免切页白屏
很多人都想.甚至曾使用HTML5开发跨平台App,并且想达到原生App的体验. 最后的结果都是无奈的放弃,HTML5貌似美好,但坑太多,想做到原生App的体验几乎不可为. 也曾有过著名的faceboo ...

利用 WAAPI 实现百叶窗切页效果

实现效果

简单思路

代码实现

利用 WAAPI 实现百叶窗切页效果相关推荐

最新文章

热门文章