鱼C论坛

 找回密码
 立即注册
查看: 2843|回复: 16

QQ登录窗口的动图

[复制链接]
发表于 2021-2-7 21:35:30 | 显示全部楼层 |阅读模式
20鱼币
求张这个qq登录界面的动图,最近在弄窗口界面
4$ZEYAOMMB$A%ZND4TM1M_7.png

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
 楼主| 发表于 2021-2-7 21:36:11 | 显示全部楼层
登录窗口的上半部分
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
发表于 2021-2-8 09:17:57 | 显示全部楼层
没有
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
发表于 2021-2-8 11:51:16 | 显示全部楼层
媒体1[00-00-00--00-00-03].gif
不知道这样行不行:
        先录制一下QQ登录窗口的动画,
        然后用爱奇艺万能联播播放,
        再用它录制一段gif。

图片没有录制好,但是我的思路大概是这样的,楼主可以参考一下
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
发表于 2021-2-8 13:24:35 | 显示全部楼层
一般来讲在它的安装路径里面应该可以找到原图的吧
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
发表于 2021-2-9 12:13:53 | 显示全部楼层
你可以把动图的几个变化的图片截下来,然后反复切换图片
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
发表于 2021-2-9 14:19:08 | 显示全部楼层
截下来之后用美图秀秀把动图部分修的更完整些
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
发表于 2021-2-17 10:25:02 | 显示全部楼层
这东西拿来有啥用呢?
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
发表于 2021-2-18 12:16:16 | 显示全部楼层
sinapark 发表于 2021-2-17 10:25
这东西拿来有啥用呢?

做钓鱼?
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
发表于 2021-2-20 09:39:18 | 显示全部楼层
1
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
发表于 2021-2-20 11:53:51 | 显示全部楼层
它的安装文件里面应该有的吧
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
发表于 2021-2-21 02:04:05 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
发表于 2021-2-26 13:28:57 | 显示全部楼层
当心南山必胜客
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
发表于 2021-3-3 14:04:06 | 显示全部楼层
Ⅲ只小猪 发表于 2021-2-8 11:51
不知道这样行不行:
        先录制一下QQ登录窗口的动画,
        然后用爱奇艺万能联播播放,

强大
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
发表于 2021-3-6 07:43:30 | 显示全部楼层
话说这个问题在这里待了多久了啊
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
发表于 2021-3-6 10:37:18 | 显示全部楼层
  1. <!DOCTYPE html>
  2. <head>
  3.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  4.     <title>html5背景</title>
  5.    
  6.     <style type="text/css">
  7.     *{margin:0;padding:0;list-style-type:none;}
  8.     a,img{border:0;}
  9.     </style>
  10.     <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
  11. </head>
  12. <body>
  13. <div id="container" style="width:100%;height:700px;">
  14.     <div id="anitOut"></div>
  15. </div>


  16. <script type="text/javascript">
  17. $(function () {
  18.     if (!window.ActiveXObject && !!document.createElement("canvas").getContext) {
  19.         $.getScript("http://im-img.qq.com/pcqq/js/200/cav.js?_=1428576021379",
  20.                 function () {
  21.                     var t = {
  22.                         width: 1.5,
  23.                         height: 1.5,
  24.                         depth: 10,
  25.                         segments: 12,
  26.                         slices: 6,
  27.                         xRange: 0.8,
  28.                         yRange: 0.1,
  29.                         zRange: 1,
  30.                         ambient: "#525252",
  31.                         diffuse: "#FFFFFF",
  32.                         speed: 0.0002
  33.                     };
  34.                     var G = {
  35.                         count: 2,
  36.                         xyScalar: 1,
  37.                         zOffset: 100,
  38.                         ambient: "#002c4a",
  39.                         diffuse: "#005584",
  40.                         speed: 0.001,
  41.                         gravity: 1200,
  42.                         dampening: 0.95,
  43.                         minLimit: 10,
  44.                         maxLimit: null,
  45.                         minDistance: 20,
  46.                         maxDistance: 400,
  47.                         autopilot: false,
  48.                         draw: false,
  49.                         bounds: CAV.Vector3.create(),
  50.                         step: CAV.Vector3.create(Math.randomInRange(0.2, 1), Math.randomInRange(0.2, 1), Math.randomInRange(0.2, 1))
  51.                     };
  52.                     var m = "canvas";
  53.                     var E = "svg";
  54.                     var x = {
  55.                         renderer: m
  56.                     };
  57.                     var i, n = Date.now();
  58.                     var L = CAV.Vector3.create();
  59.                     var k = CAV.Vector3.create();
  60.                     var z = document.getElementById("container");
  61.                     var w = document.getElementById("anitOut");
  62.                     var D, I, h, q, y;
  63.                     var g;
  64.                     var r;

  65.                     function C() {
  66.                         F();
  67.                         p();
  68.                         s();
  69.                         B();
  70.                         v();
  71.                         K(z.offsetWidth, z.offsetHeight);
  72.                         o()
  73.                     }

  74.                     function F() {
  75.                         g = new CAV.CanvasRenderer();
  76.                         H(x.renderer)
  77.                     }

  78.                     function H(N) {
  79.                         if (D) {
  80.                             w.removeChild(D.element)
  81.                         }
  82.                         switch (N) {
  83.                             case m:
  84.                                 D = g;
  85.                                 break
  86.                         }
  87.                         D.setSize(z.offsetWidth, z.offsetHeight);
  88.                         w.appendChild(D.element)
  89.                     }

  90.                     function p() {
  91.                         I = new CAV.Scene()
  92.                     }

  93.                     function s() {
  94.                         I.remove(h);
  95.                         D.clear();
  96.                         q = new CAV.Plane(t.width * D.width, t.height * D.height, t.segments, t.slices);
  97.                         y = new CAV.Material(t.ambient, t.diffuse);
  98.                         h = new CAV.Mesh(q, y);
  99.                         I.add(h);
  100.                         var N, O;
  101.                         for (N = q.vertices.length - 1; N >= 0; N--) {
  102.                             O = q.vertices[N];
  103.                             O.anchor = CAV.Vector3.clone(O.position);
  104.                             O.step = CAV.Vector3.create(Math.randomInRange(0.2, 1), Math.randomInRange(0.2, 1), Math.randomInRange(0.2, 1));
  105.                             O.time = Math.randomInRange(0, Math.PIM2)
  106.                         }
  107.                     }

  108.                     function B() {
  109.                         var O, N;
  110.                         for (O = I.lights.length - 1; O >= 0; O--) {
  111.                             N = I.lights[O];
  112.                             I.remove(N)
  113.                         }
  114.                         D.clear();
  115.                         for (O = 0; O < G.count; O++) {
  116.                             N = new CAV.Light(G.ambient, G.diffuse);
  117.                             N.ambientHex = N.ambient.format();
  118.                             N.diffuseHex = N.diffuse.format();
  119.                             I.add(N);
  120.                             N.mass = Math.randomInRange(0.5, 1);
  121.                             N.velocity = CAV.Vector3.create();
  122.                             N.acceleration = CAV.Vector3.create();
  123.                             N.force = CAV.Vector3.create()
  124.                         }
  125.                     }

  126.                     function K(O, N) {
  127.                         D.setSize(O, N);
  128.                         CAV.Vector3.set(L, D.halfWidth, D.halfHeight);
  129.                         s()
  130.                     }

  131.                     function o() {
  132.                         i = Date.now() - n;
  133.                         u();
  134.                         M();
  135.                         requestAnimationFrame(o)
  136.                     }

  137.                     function u() {
  138.                         var Q, P, O, R, T, V, U, S = t.depth / 2;
  139.                         CAV.Vector3.copy(G.bounds, L);
  140.                         CAV.Vector3.multiplyScalar(G.bounds, G.xyScalar);
  141.                         CAV.Vector3.setZ(k, G.zOffset);
  142.                         for (R = I.lights.length - 1; R >= 0; R--) {
  143.                             T = I.lights[R];
  144.                             CAV.Vector3.setZ(T.position, G.zOffset);
  145.                             var N = Math.clamp(CAV.Vector3.distanceSquared(T.position, k), G.minDistance, G.maxDistance);
  146.                             var W = G.gravity * T.mass / N;
  147.                             CAV.Vector3.subtractVectors(T.force, k, T.position);
  148.                             CAV.Vector3.normalise(T.force);
  149.                             CAV.Vector3.multiplyScalar(T.force, W);
  150.                             CAV.Vector3.set(T.acceleration);
  151.                             CAV.Vector3.add(T.acceleration, T.force);
  152.                             CAV.Vector3.add(T.velocity, T.acceleration);
  153.                             CAV.Vector3.multiplyScalar(T.velocity, G.dampening);
  154.                             CAV.Vector3.limit(T.velocity, G.minLimit, G.maxLimit);
  155.                             CAV.Vector3.add(T.position, T.velocity)
  156.                         }
  157.                         for (V = q.vertices.length - 1; V >= 0; V--) {
  158.                             U = q.vertices[V];
  159.                             Q = Math.sin(U.time + U.step[0] * i * t.speed);
  160.                             P = Math.cos(U.time + U.step[1] * i * t.speed);
  161.                             O = Math.sin(U.time + U.step[2] * i * t.speed);
  162.                             CAV.Vector3.set(U.position, t.xRange * q.segmentWidth * Q, t.yRange * q.sliceHeight * P, t.zRange * S * O - S);
  163.                             CAV.Vector3.add(U.position, U.anchor)
  164.                         }
  165.                         q.dirty = true
  166.                     }

  167.                     function M() {
  168.                         D.render(I)
  169.                     }

  170.                     function J(O) {
  171.                         var Q, N, S = O;
  172.                         var P = function (T) {
  173.                             for (Q = 0, l = I.lights.length; Q < l; Q++) {
  174.                                 N = I.lights[Q];
  175.                                 N.ambient.set(T);
  176.                                 N.ambientHex = N.ambient.format()
  177.                             }
  178.                         };
  179.                         var R = function (T) {
  180.                             for (Q = 0, l = I.lights.length; Q < l; Q++) {
  181.                                 N = I.lights[Q];
  182.                                 N.diffuse.set(T);
  183.                                 N.diffuseHex = N.diffuse.format()
  184.                             }
  185.                         };
  186.                         return {
  187.                             set: function () {
  188.                                 P(S[0]);
  189.                                 R(S[1])
  190.                             }
  191.                         }
  192.                     }

  193.                     function v() {
  194.                         window.addEventListener("resize", j)
  195.                     }

  196.                     function A(N) {
  197.                         CAV.Vector3.set(k, N.x, D.height - N.y);
  198.                         CAV.Vector3.subtract(k, L)
  199.                     }

  200.                     function j(N) {
  201.                         K(z.offsetWidth, z.offsetHeight);
  202.                         M()
  203.                     }

  204.                     C();
  205.                 })
  206.     } else {
  207.         alert('调用cav.js失败');
  208.     }
  209. });
  210. </script>
  211. </body>
  212. </html>


  213. 相关资源:HTML5 canvas全屏酷炫星空背景动画特效
  214. 关注博主即可阅读
复制代码
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
发表于 2021-3-6 10:39:58 | 显示全部楼层


https://blog.csdn.net/weixin_33947521/article/details/86012225
这里看了个思路。不知道有用没有
https://www.17sucai.com/pins/9869.htmlhtml5腾讯QQ登录界面背景动画特效
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1

GMT+8, 2023-2-9 10:11

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表