一个简单的视觉差效果

本文介绍了如何通过模拟视觉差效果创建一个看似酷炫的动画。文章作者受一篇关于视错觉的文章启发,实现了一个简化版的效果,由多层视图组成。通过动态改变第二层和第三层视图的相对位置,实现了类似视错觉的动画效果。读者可以下载代码进行实践,文章还提到了如何调整视图的frame以实现不同位置的效果。
摘要由CSDN通过智能技术生成

一个简单的视觉差效果

  这两天看到一篇写的很不错的文章视错觉的概述,他讲述了如何用一个简单的视觉差来做出一个看似酷炫的效果。对思维的启发还是很大的。我也模仿着做了一遍。如果有不足的地方,请大家指出一下~
  下载地址:git   
  
  效果图:(感觉有点像mm豆。。。)
   
  效果图
  
这个效果是由多层view组合而成的,分解下来层次关系如下图:
  层次关系
  在视错觉的概述这篇文章中,其实是要多一层的,即把第二层第三层按顺序addSubView到同一个view上。因为他有一个抖动的效果,如果不需要抖动的效果,我觉得可以简化掉一层view。

  • 最下面一层,是几个圆形依次添加到self.view
  • 第二层view要与最下面一层的某一个圆形保持大小和位置的一致性,然后将它也添加到self.view上。并且将自身的clipsToBounds设置为YES,他的意思是如果它的subView超过它的大小的部分不允许显示。这也是关键的地方–只显示第二层这个圆形的frame部分的subView。
  • 第三层上添加与最下面一层大小和位置相同的几个圆形,我在每个圆形上加上一个label来显示文字,然后将它添加到第二层上面,作为第二层的subView,它只会显示与二层重叠的地方。
  • 通过动态的改变第三层与第二层的相对位置就能实现这个效果啦~

ps:最后有一层button我并没有在图中画出来,无非就是点击按钮来改变二、三层的相对位置。

关于相对位置

  在一开始,相对位置是这样的。第三层的frame是(0, 0, self.frame.size.width, self.frame.size.height)];
层次关系
  点击第二个按钮后,我们要改变两者的位置关系

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
苹果官网使用的滚动视觉效果可以通过 CSS 和 JavaScript 实现。以下是一个简单的示例代码: HTML: ``` <div class="parallax"> <div class="parallax__layer parallax__layer--back"> <img src="back.png"> </div> <div class="parallax__layer parallax__layer--base"> <img src="base.png"> </div> </div> ``` CSS: ``` .parallax { height: 100vh; overflow-x: hidden; overflow-y: auto; } .parallax__layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .parallax__layer--back { z-index: -1; } .parallax__layer--base { z-index: 0; } img { display: block; width: 100%; height: auto; } ``` JavaScript: ``` const parallax = document.querySelector('.parallax'); const layers = parallax.querySelectorAll('.parallax__layer'); function moveLayersOnScroll() { const scrollTop = window.pageYOffset; layers.forEach(layer => { const speed = layer.getAttribute('data-speed'); const yPos = -scrollTop * speed / 100; layer.style.transform = `translate3d(0, ${yPos}px, 0)`; }); } window.addEventListener('scroll', moveLayersOnScroll); ``` 在这个示例中,我们创建了一个 `.parallax` 容器来包含两个图层,一个在背景中,另一个在前景中。每个图层都有一个自定义的 `data-speed` 属性,用于设置它们在滚动时移动的速度。JavaScript 中的 `moveLayersOnScroll` 函数将根据滚动距离计算出每个图层的位置,并将它们应用到 CSS 中的 `transform` 属性上,使它们随着滚动而移动。最后,我们在 `window` 对象上添加了一个滚动事件监听器,以便在滚动时更新图层的位置。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值