当前位置:首页>滚动 > >正文

环球速讯:卡片放大播放效果实现总结,不同元素间的放大过渡效果如何实现?

  • 2023-01-11 02:41:44来源:程序员客栈

背景

最近一段时间做了几个需求,其中涉及的素材列表展示,需要实现类似下方图片中的动效,暂且称之为【卡片放大播放动效】,具体细节如下:

初始展示的是封面图片,鼠标经过时是视频放大的效果;下方文字内容区域,在放大前后展示的内容不同,而且两者的字体大小是一致的,不是简单的放大实现;四五个页面都需要实现相同列表效果,列表的行数和列数是不一致的;
image
遇到的四个问题

在整个实现过程中,遇到以下四个问题,后面的解析中会有对应解答。


【资料图】

不同元素间的放大过渡效果如何实现?抽离为通用性组件时,如何实现类vue中的具名插槽效果,来替换下方文字信息区域?不同页面中的列表区域宽度不同,有的页面列表还是弹性宽度,常用的flex布局无法满足要求,如何实现呢?边界卡片放大后,如何避免被父级列表容器overflow:hidden`隐藏掉?实现解析

这个动效,在爱奇艺官网也有类似效果,爱奇艺官网是通过生成初始状态卡片列表和鼠标放大卡片列表两套列表,然后通过动态计算放大卡片位置,相对于body进行绝对定位展示的。

本实现方案通过将卡片初始状态和放大状态,封装到一个组件中,通过两者间的相对关系,利用css自动完成对应关系,避免了大量的JS计算。

1. 放大效果实现

UI对该动效的要求实际就是鼠标视频放大播放,如果卡片初始状态也放置视频video,通过transition对同一元素进行scale放大也可以实现,但是这是一个列表,用户进入页面,就会同时加载多个视频,用户体验不是很好。

所以,实现方案就是卡片初始状态放置poster图片,鼠标经过时,在poster上方展示视频层(绝对定位),然后对视频执行animation动画来模拟放大效果。

卡片底部文字区域如何处理?

由于卡片初始状态下,底部文字区域在列表布局中是占位的,所以在卡片初始状态下,底部文字区域使用正常文档流。

卡片鼠标经过状态下,视频层的放大效果是以poster中心点为放大原点的,所以底部文字区域使用absolute定位,相对于player进行定位处理。

interfaceIItemData{src?:string;poster?:string;industry?:string;}interfaceIProps{posterClass:string;//poster区域宽高playerClass:string;//放大后视频宽高样式itemData:IItemData;children:{[key:string]:any};}lett:NodeJS.Timeout;constVideoItem:FC=({posterClass,playerClass,itemData,children,})=>{const[isHover,setIsHover]=useState(false);constonMouseEnter=()=>{t=setTimeout(()=>{//避免快速移动鼠标,造成视频无法隐藏问题setIsHover(true);},50);};constonMouseLeave=()=>{clearTimeout(t);setIsHover(false);};return(Top1
{isHover?({children?.playerBottom}
):null}{children?.posterBottom});};exportdefaultVideoItem;

.container{position:relative;.poster{position:relative;background-position:center;background-size:cover;background-repeat:no-repeat;.player{z-index:10;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)scale(0.929);animation:showPlayer0.2sease;animation-fill-mode:forwards;.playerBottom{width:100%;position:absolute;top:100%;left:0;box-shadow:0px6px16px-8pxrgba(0,0,0,0.08),0px12px48px16pxrgba(0,0,0,0.03);filter:drop-shadow(0px9px28pxrgba(0,0,0,0.05));}}}.posterBottom{width:100%;}}@keyframesshowPlayer{0%{transform:translate(-50%,-50%)scale(0.929);}100%{transform:translate(-50%,-50%)scale(1);}}

2. 抽离为通用组件时,卡片底部文字区域如何动态替换

整个卡片组件,底部的文字区域在不同的场景下可能是不同的,所以作为通用性组件,需要将这部分抽离,支持动态替换。

vue中最简单的方式,就是插槽,通过插槽从外部动态传入。但是react框架是不支持具名插槽的。所以,这个问题就转换成了,react如何实现具名插槽?

网上搜到了一种实现方式,通过传入一个object来实现,具体效果如下:

//cardList{{posterBottom:bottomInfo,playerBottom:bottomInfo,onClickPlayer:()=>{consturl=`${window.location.origin}/#/market/service/${item.itemId}`;window.open(url,"_blank");},}}//VideoItem{props.children?.playerBottom}{props.children?.posterBottom}

当然,具名插槽还有其它的实现方式,后面会专门写一篇文章总结学习下。

3. 列表容器如果是弹性布局时,每行的列数无法固定,flex布局无法满足

这个问题是一个通用性问题,在容器宽度不固定时,flex布局,每行最后一个元素无法选中设置样式,同时子元素个数不固定时,最后一行元素的间距会变大。

这种情况下,就需要grid布局大显身手了,以前很少用grid布局,这次也是学习到了,具体效果如下图:

在示例中,调整浏览器窗口大小,来实验弹性布局观看效果代码片段

image.png
4. 卡片放大后,可能会被容器设置的overflow:hidden给遮盖隐藏掉

目前放大效果的实现方式,放大的视频层是绝对定位的,参照物是每个卡片本身。所以在四周边界处的卡片,放大后,很容易被容器给遮盖。

处理方式也很简单,给容器多设置一些padding,让放大部分足够展示,然后用margin设置负值来调整布局

.container{margin-left:-20px;margin-right:-20px;padding-left:20px;padding-right:20px;}

总结

每个产品需求里,可能都会隐藏着自己的盲点,将效果做到极致,就能获得技术成长。在重复的需求里,多反思总结,寻找自己的提升点,这就是进步吧啊。

相关推荐

1.CSS 实现按钮点击动效的套路

2.年份数字拼图效果

3.跑马灯简单版

4.中心点靠近动画解析

标签: 初始状态 绝对定位 这个问题

延伸阅读

推荐阅读

从秀场到生活场,小红书携手上海时装周时尚周末,引领时尚潮流新趋势

【携手上海时装周时尚周末,引领时尚潮流新趋势】上海时装周的影响力正在不断扩大,并成为上海这座城市和中国时尚产业链接全球的名片和代表

“康健说”公益讲座走进校园 普及心理健康知识

“康健说”公益讲座走进校园普及心理健康知识2023年09月09日14:50中国网财经

中到大雨,个别地点有暴雨!还要警惕强对流!

点击标题下「河北新闻广播」可快速关注昨晚开始,我省迎来新一场降雨。

桂林这个以辣椒命名的小山村太美了

六漫村在大多数市民看来词语“六漫”和“辣椒”毫不相关但是在龙胜各族

教师节前夕 这位老师捐髓救学生

教师节前夕这位老师捐髓救学生

王建涛:逆袭的工人院士|圳青年

02:21如果用一个词来形容王建涛的经历,那就是“逆袭”。王建涛生于197

不再是大号手环?小米新手表曝光

近期,网友爆料小米即将发布的全新智能手表,可能命名为小米Watch2Pro

股票行情快报:昊华科技(600378)9月8日主力资金净卖出650.83万元

截至2023年9月8日收盘,昊华科技(600378)报收于34 02元,下跌0 53%,换

火箭瞄准勇士旧将,格林离队进入倒计时!斯通寻找新中锋取得进展

他为火箭队搭建的阵容似乎有些过于年轻化,在今年的休赛期,他们先后和

这些汽车被曝“大量收集数据”!其中最严重的是

来源:参考消息网参考消息网9月8日报道据法新社9月6日报道,一项研究6

外交部回应美方调查华为手机芯片

9月8日,外交部发言人毛宁就美国对华为手机芯片展开调查一事回答媒体问

深圳一商贩激流中淡定卖炒饭 太不容易了!

【深圳一商贩激流中淡定卖炒饭】7日晚,受暴雨侵袭,深圳多个路段出现

就在刚刚!局势突变,国际传来六个消息

就在刚刚!局势突变,国际传来六个消息,巴西,海盗,索马里,大堡礁,珊瑚

智慧社区场景化创新助力城市美好生活“零距离”

自2014年5月住房和城乡建设部印发《智慧社区建设指南(试行)》开始,中

男人怎样通过吃来补肾,大虾、韭菜等阳性食物?

男人怎样通过吃来补肾,大虾、韭菜等阳性食物?1、第一:如果是肾阳虚

幸福蓝海9月8日快速回调

以下是幸福蓝海在北京时间9月8日13:55分盘口异动快照:9月8日,幸福蓝

沙钞!足球报:斯坦丘税后年薪200万欧+奖金条款,高于在中超收入

沙钞!足球报:斯坦丘税后年薪200万欧+奖金条款,高于在中超收入,国民,

英伦星光(关于英伦星光简述)

,你们好,今天0471房产来聊聊一篇伦星光,伦星光简述的文章,网友们对

2023年全国中小学消防安全公开课直播回放入口汇总

2023秋季全国中小学消防安全公开课9月8日15时,2023年秋季全国中小学消

安徽池州通报3起建筑施工事故,共造成3人死亡

安徽池州市应急管理局9月7日通报3起建筑施工领域事故,3起事故前后在近

responseentity下载文件(下载的Res.rdb文件可以修改么)

1、好像有的可以改。2、有的不可以;要根据文件而定;也就是说有的文件

走进沉浸式文旅新场景:拓展体验空间,挖掘消费潜力

走进沉浸式文旅新场景:拓展体验空间,挖掘消费潜力-

滁州市人民代表大会常务委员会任免人员名单

滁州市人民代表大会常务委员会任命人员名单(2023年8月30日滁州市第七

朗科科技:截至8月18日 公司股东人数约1.89万

朗科科技8月31日在投资者互动平台表示,公司看好存储行业前景,积极围

下一页下一页下一集(下一页下一页)

导读1、能吸引人的才会有下一页。本文到此讲解完毕了,希望对大家有帮

龙洞堡国际机场综合性指定监管场地通过现场验收 | 暑运黔游“热”

8月30日,贵州首个综合性指定监管场地—贵阳龙洞堡国际机场综合指定监

从张之臻到中国军团,突破永不停歇

体坛加,体坛+,艾迪,美网,张之臻,吴易昺,王欣瑜,朱琳,从张之臻到中国军

草原上的“丰收那达慕”!2023年《中国农民丰收节晚会》落地伊金霍洛旗

“庆丰收、促和美”,第六个“中国农民丰收节”将在9月23日农历秋分如

驾驶证如何期满换证?

驾驶证期满换证方式如下:根据《机动车驾驶证申领和使用规定》162号令

突发!足协做出英明决定,申花大连人成大赢家,吴金贵谢晖安心了

对此,《足球报》这样写道:“根据时间点来看,足协杯半决赛与亚运会男

猜您喜欢

Copyright ©  2015-2022 大河服装网版权所有  备案号:京ICP备2022022245号-75   联系邮箱:435 226 40@qq.com