欢迎光临散文网 会员登陆 & 注册

全新版FRIDA与安卓 应用安全与逆向实战宝典(原版)

2023-08-08 12:40 作者:bili_51805000088  | 我要投稿

全新版FRIDA与安卓 应用安全与逆向实战宝典(原版)

download：https://www.zxit666.com/6432/

卡片的 3D 旋转跟随效果

OK，接下来，如何完成 3D 卡片效果呢？

这个交互效果主要有两个中心：

  1. 借助了 CSS 3D 的才能

  2. 元素的旋转需求和鼠标的挪动相分离


这里，我们其实有两个中心元素：

  1. 鼠标活动区域

  2. 旋转物体自身

鼠标在鼠标活动区域内的挪动，会影响旋转物体自身的 3D 旋转，而旋转的方向其实能够被合成为 X 轴方向与 Y 轴方向。

我们来看一下，假定我们的 HTML 构造如下：

<body>    <div id="element"></div></body>


这里，body 的范围就是整个鼠标可活动区域，也是我们添加鼠标的 mousemove 事情的宿主 target，而 #element 就是需求跟随鼠标一同转动的旋转物体自身。

由于整个效果是需求基于 CSS 3D 的，我们首先加上简单的 CSS 3D 效果：

body {    width: 100vw;    height: 100vh;    transform-style: preserve-3d;    perspective: 500px; }div {    width: 200px;    height: 200px;    background: #000;    transform-style: preserve-3d; }



没有什么不一样。这是由于还没有添加任何的 3D 变换，我们给元素添加 X、Y 两个方向的 rotate() 试一下（留意，这里默许的旋转圆心即是元素中心）：

div {     transform: rotateX(15deg) rotateY(30deg); }

效果如下，是有那么点意义了


好，接下来，我们的目的就是经过分离 mouseover 事情，让元素动起来。

控制 X 方向的挪动

当然，为了愈加容易了解，我们把动画拆分为 X、Y 两个方向上的挪动。首先看 X 方向上的挪动：


这里，我们需求以元素的中心为界：

  1. 当鼠标在中心右侧连续挪动，元素绕 Y 轴挪动，并且值从 0 开端，越来越大，范围为(0, +∞)deg

  2. 反之，当鼠标在中心左侧连续挪动，元素绕 Y 轴挪动，并且值从 0 开端，越来越小，范围为(-∞, 0)deg

这样，我们能够得到这样一个公式：

rotateY = (鼠标 x 坐标 - 元素左上角 x 坐标 - 元素宽度的一半)deg

经过绑定 onmousemove 事情，我们尝试一下：

const mouseOverContainer = document.getElementsByTagName("body")[0];const element = document.getElementById("element"); mouseOverContainer.onmousemove = function(e) {  let box = element.getBoundingClientRect();  let calcY = e.clientX - box.x - (box.width / 2);      element.style.transform  = "rotateY(" + calcY + "deg) "; }


好吧，旋转的太夸大了，因而，我们需求加一个倍数停止控制：

const multiple = 20;const mouseOverContainer = document.getElementsByTagName("body")[0];const element = document.getElementById("element"); mouseOverContainer.onmousemove = function(e) {  let box = element.getBoundingClientRect();  let calcY = (e.clientX - box.x - (box.width / 2)) / multiple;      element.style.transform  = "rotateY(" + calcY + "deg) "; }

经过一个倍数约束后，效果好了不少


控制 Y 方向的挪动

同理，我们应用上述的方式，同样能够控制 Y 方向上的挪动：

const multiple = 20;const mouseOverContainer = document.getElementsByTagName("body")[0];const element = document.getElementById("element"); mouseOverContainer.onmousemove = function(e) {  let box = element.getBoundingClientRect();  let calcX = (e.clientY - box.y - (box.height / 2)) / multiple;      element.style.transform  = "rotateX(" + calcX + "deg) "; };


当然，在这里，我们会发现方向是元素运动的方向是反的，所以需求做一下取反处置，修正下 calcX 的值，乘以一个 -1 即可：

let calcX = (e.clientY - box.y - (box.height / 2)) / multiple * -1;

分离 X、Y 方向的挪动

OK，到这里，我们只需求把上述的结果兼并一下即可，同时，上面我们运用的是 onmousemove 触发每一次动画挪动。现代 Web 动画中，我们更倾向于运用 requestAnimationFrame 去优化我们的动画，确保每一帧渲染一次动画即可。

完好的改造后的代码如下：

const multiple = 20;const mouseOverContainer = document.getElementsByTagName("body")[0];const element = document.getElementById("element");function transformElement(x, y) {  let box = element.getBoundingClientRect();  let calcX = -(y - box.y - (box.height / 2)) / multiple;  let calcY = (x - box.x - (box.width / 2)) / multiple;    element.style.transform  = "rotateX("+ calcX +"deg) "                        + "rotateY("+ calcY +"deg)"; } mouseOverContainer.addEventListener('mousemove', (e) => {  window.requestAnimationFrame(function(){    transformElement(e.clientX, e.clientY);  }); });

至此，我们就能简单的完成题图所示的鼠标跟随 3D 旋转动效：


设置平滑出入

如今，还有最后一个问题，就是当我们的鼠标分开活动区域时，元素的 transform 将停留在最后一帧，正确的表现应该是恢复到原状。因而，我们还需求添加一些事情监听做到元素的平滑复位。

经过一个 mouseleave 事情配合元素的 transition 即可。

div {    // 与上述坚持分歧...    transition: all .2s; }mouseOverContainer.addEventListener('mouseleave', (e) => {  window.requestAnimationFrame(function(){    element.style.transform = "rotateX(0) rotateY(0)";  }); });

至此，我们就能够圆满的完成平滑出入，


基于上述的铺垫，我们改造一下我们的 DEMO，只是把上述 DEMO 中中心的黑块，交换成我们的毛玻璃元素，将背景交换成图片。

完好的代码：

<div id="element"></div>

CSS 代码：

body {    width: 100vw;    height: 100vh;    transform-style: preserve-3d;    background: url(https://picsum.photos/id/242/1920/1080); }div {    width: 600px;    height: 300px;    transform-style: preserve-3d;    backdrop-filter: blur(15px);    background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.5));    transition: all 0.3s; }

Javascript 代码：

const multiple = 25;const mouseOverContainer = document.getElementsByTagName("body")[0];const element = document.getElementById("element");function transformElement(x, y) {  const box = element.getBoundingClientRect();  const calcX = -(y - box.y - (box.height / 2)) / multiple;  const calcY = (x - box.x - (box.width / 2)) / multiple;  let angle = Math.floor(getMouseAngle((y - box.y - (box.height / 2)), (x - box.x - (box.width / 2))));  element.style.transform  = "rotateX("+ calcX +"deg) " + "rotateY("+ calcY +"deg)"; } mouseOverContainer.addEventListener('mousemove', (e) => {  window.requestAnimationFrame(function(){    transformElement(e.clientX, e.clientY);  }); }); mouseOverContainer.addEventListener('mouseleave', (e) => {  window.requestAnimationFrame(function(){    element.style.transform = "rotateX(0) rotateY(0)";  }); });

这样，我们的当前的整个 DEMO 效果就变成了这样

透明度变化

OK，最后，剩下最关键一步。我们需求让整个卡片的磨砂感和透明度不一样，随着整体鼠标的 Hover 位置而实时发作变化。

这里我们会用到两个中心是技术：

  1. mask 遮罩，改动 background 的透明度

  2. 应用 CSS @property 完成 mask 和 background 的突变角度变换动画效果

这里是整个效果最为复杂的中央。

我们一个一个来了解。

首先，基于 background 透明度完成的毛玻璃效果，我们能够应用 mask 让整个毛玻璃效果的透明度不平均分歧。

什么意义呢？看看这张图

应用 mask，我们就能让毛玻璃效果不均与。上述比照图中，图 2 和 图 3 的 mask 的角度分别是 90deg、270deg。

那么，我们只需求在 HOVER 的过程中，动态的算出当前鼠标的位置相关于元素中心的角度值，赋值给 mask 即可！

像是这样：mask: linear-gradient(var(--angle), rgba(255, 255, 255, .5), #fff);，其中 --angle 的值，由 JavaScript 计算，实时传给 mask 即可。

并且，由于，突变是不支持过渡动画的，因而，我们需求 CSS @property 来完成 mask 角度变化的动画效果。

这里中心的代码如下：

div {    width: 600px;    height: 300px;    backdrop-filter: blur(15px);    background: linear-gradient(var(--angle), rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.5));    mask: linear-gradient(var(--angle), rgba(255, 255, 255, .5), #fff);    transition: all 0.3s, --angle 0.3s; }const multiple = 25;const mouseOverContainer = document.getElementsByTagName("body")[0];const element = document.getElementById("element");function transformElement(x, y) {  const box = element.getBoundingClientRect();  const calcX = -(y - box.y - (box.height / 2)) / multiple;  const calcY = (x - box.x - (box.width / 2)) / multiple;  let angle = Math.floor(getMouseAngle((y - box.y - (box.height / 2)), (x - box.x - (box.width / 2))));  element.style.transform  = "rotateX("+ calcX +"deg) " + "rotateY("+ calcY +"deg)";  element.style.setProperty("--angle", `${-angle}deg`); }function getMouseAngle(x, y) {  const radians = Math.atan2(y, x);  let angle = radians * (180 / Math.PI);    if (angle < 0) {    angle += 360;  }    return angle; } mouseOverContainer.addEventListener('mousemove', (e) => {  window.requestAnimationFrame(function(){    transformElement(e.clientX, e.clientY);  }); }); mouseOverContainer.addEventListener('mouseleave', (e) => {  window.requestAnimationFrame(function(){    element.style.transform = "rotateX(0) rotateY(0)";  }); });

上面的代码，有两点需求再解释一下：

  1. getMouseAngle() ·用于计算当前鼠标位置相关于元素中心点的角度值

  2. 我们同时将角度变化设置给了 background 突变背景，这样会让背景的突变角度也跟随变化，可以让整体效果更好

如此一下，我们的整体效果就变成了这样

圆满！整体动画连接，hover 时不卡顿，而且效果丝滑了不少。


标签：

全新版FRIDA与安卓 应用安全与逆向实战宝典(原版)的评论 (共 条)

分享到微博请遵守国家法律