tommyZZM

tommyZZM 查看完整档案

广州编辑广东工业大学  |  数字媒体技术 编辑  |  填写所在公司/组织 github.com/tommyZZM/tommyzzm.github.io 编辑
编辑

没时间解释了,快互粉!https://github.com/tommyZZM

个人动态

tommyZZM 赞了文章 · 2020-04-29

?CSS + JS 送学妹满屏幕小爱心

故事开始

午饭时间,暗恋已久的学妹拉着我的衣袖:“学长学长,你能不能让这些爱心变成五颜六色的吗~”。


我在旁边笑开了花~~~
0.png




诶呀,口水流出来了。


我想最终效果是这样的(猜猜多少个爱心):

爱心666 (2).gif

然后开始动手吧~

学啥本领

本文将带大家学习两个好东西:
1.生成随机色的方法;
2.Element.animate() 方法。


当然,还有撩妹技巧了~

代码走起

1. 画个小爱心


爱心怎么画,不是咱们本文重点,so,SVG搞起:

<div id="heart">
  <svg t="1587910011145" class="icon" viewBox="0 0 1024 1024" version="1.1" 
       xmlns="http://www.w3.org/2000/svg" p-id="1253" width="32" height="32"
  >
    <path d="M677.51936 192.03072c113.1008 0 204.8 91.6992 204.8 204.77952 0 
             186.91072-370.3296 435.15904-370.3296 435.15904S141.68064 592.67072 141.68064 
             396.81024c0-140.78976 91.6992-204.77952 204.77952-204.77952 68.11648 0 
             128.28672 33.40288 165.5296 84.55168C549.24288 225.4336 609.41312 192.03072 
             677.51936 192.03072z" p-id="1254"
    ></path>
  </svg>
</div>

小爱心出来了:

0 (3).png

2. 画一大堆爱心

现在删除到之前的 SVG 标签,换成动态生成咯~~

let heartList = '';
const n = 99;
for(let i = 0; i <= n; i++){
    heartList += `
      <svg t="1587910011145" class="icon" viewBox="0 0 1024 1024" version="1.1" 
           xmlns="http://www.w3.org/2000/svg" p-id="1253" width="32" height="32">
        <path d="M677.51936 192.03072c113.1008 0 204.8 91.6992 204.8 204.77952 0 
                 186.91072-370.3296 435.15904-370.3296 435.15904S141.68064 592.67072 141.68064 
                 396.81024c0-140.78976 91.6992-204.77952 204.77952-204.77952 68.11648 0 
                 128.28672 33.40288 165.5296 84.55168C549.24288 225.4336 609.41312 192.03072 
                 677.51936 192.03072z" p-id="1254"
        ></path>
      </svg>
    `
}
document.getElementById('heart').innerHTML = heartList;

一大堆小爱心出现啦:

0 (2).png

3. 打造魔法棒

接下来我们要打造一把魔法棒,能让我们这些小爱心变成各种各样的颜色。
没错,这把魔法棒,就是用来生成随机颜色。


方法很多,我搜集以下几种简单好用的生成随机颜色的方法,基本我们业务随便一个都能用:

function getRandomColor(){
    const r = Math.floor(Math.random()*255);
    const g = Math.floor(Math.random()*255);
    const b = Math.floor(Math.random()*255);
    return 'rgba('+ r +','+ g +','+ b +',0.8)';
}

function getRandomColor(){
    return '#'+Math.floor(Math.random()*16777215).toString(16);
}

function getRandomColor(){
    return '#' + (function(color){    
        return (color +=  '0123456789abcdef'[Math.floor(Math.random()*16)])    
        && (color.length == 6) ?  color : arguments.callee(color);    
    })('');
}

function getRandomColor(){
    return '#'+'0123456789abcdef'.split('').map(
        (v,i,a) => i>5 ? null : a[Math.floor(Math.random()*16)] 
    ).join('');
}

function getRandomColor(){
    return '#'+('00000'+(Math.random()*0x1000000<<0).toString(16)).slice(-6);
}

function getRandomColor(){
    const colorAngle = Math.floor(Math.random()*360);
    return 'hsla('+ colorAngle +',100%,50%,1)';
}

function getRandomColor(){
    return (function(m,s,c){
        return (c ? arguments.callee(m,s,c-1) : '#') +
        s[m.floor(m.random() * 16)]
    })(Math,'0123456789abcdef',5)
}

随机色真好玩~

4. 五颜六色!变~

最后,我们修改前面 SVG 的代码片段,加入 getRandomColor 方法的调用:

for(let i = 0; i <= n; i++){
    heartList += `
      <svg t="1587910011145" class="icon" viewBox="0 0 1024 1024" version="1.1" 
           xmlns="http://www.w3.org/2000/svg" p-id="1253" width="32" height="32"
                     fill="${getRandomColor()}"
            >
        <path d="M677.51936 192.03072c113.1008 0 204.8 91.6992 204.8 204.77952 0 
                 186.91072-370.3296 435.15904-370.3296 435.15904S141.68064 592.67072 141.68064 
                 396.81024c0-140.78976 91.6992-204.77952 204.77952-204.77952 68.11648 0 
                 128.28672 33.40288 165.5296 84.55168C549.24288 225.4336 609.41312 192.03072 
                 677.51936 192.03072z" p-id="1254"
        ></path>
      </svg>
    `
}

99 个小爱心,水灵灵的!

0 (8).png

5. 动起来吧!

这时候,每个爱心都静静躺着页面,是时候让它们动起来啦,为了学妹~


继续改造前面 SVG 代码,为每个 SVG 标签添加连续 ID 值:

for(let i = 0; i <= n; i++){
    heartList += `
      <svg id="heart_${i}" t="1587910011145" class="icon" viewBox="0 0 1024 1024" version="1.1" 
           xmlns="http://www.w3.org/2000/svg" p-id="1253" width="32" height="32"
                     fill="${getRandomColor()}"
            >
        <path d="M677.51936 192.03072c113.1008 0 204.8 91.6992 204.8 204.77952 0 
                 186.91072-370.3296 435.15904-370.3296 435.15904S141.68064 592.67072 141.68064 
                 396.81024c0-140.78976 91.6992-204.77952 204.77952-204.77952 68.11648 0 
                 128.28672 33.40288 165.5296 84.55168C549.24288 225.4336 609.41312 192.03072 
                 677.51936 192.03072z" p-id="1254"
        ></path>
      </svg>
    `
}

生命随机放大倍数,并设置动画效果:

let getRandomNum = () => Math.floor(Math.random()*2+1);
setTimeout(function(){
    for (let i = 0; i <= n; i++) {
        const item = `heart_${i}`;
        document.getElementById(item).animate([
            // keyframes translateY(0px)
            { transform: `scale(${getRandomNum()})` },
            { transform: `scale(${getRandomNum()})` },
            { transform: `scale(${getRandomNum()})` },
            { transform: `scale(${getRandomNum()})` },
            { transform: `scale(${getRandomNum()})` },
            { transform: `scale(${getRandomNum()})` },
        ], {
            // timing options
            duration: 5000,
            iterations: Infinity
        });
    }
}, 100)

然后,小爱心们动起来啦。

0.gif

6. 飞起来吧~


接下来,要让这些小爱心飞起来~

0 (1).gif

下面贴代码。

html,body{
    overflow: hidden;
    width: 100%;
    height: 100%;
    margin: 0;
}
#heart{
    position: relative;
}
.item{
    position: absolute;
}

逻辑修改:

let heartList = ''; 
const n = 666; // 总爱心数
// 生成随机颜色
function getRandomColor() {
    return (function (m, s, c) {
        return (c ? arguments.callee(m, s, c - 1) : '#') +
            s[m.floor(m.random() * 16)]
    })(Math, '0123456789abcdef', 5)
}
// 生成爱心列表
for(let i = 0; i <= n; i++){
    heartList += `
      <svg id="heart_${i}" class="item" t="1587910011145" class="icon" viewBox="0 0 1024 1024" version="1.1" 
           xmlns="http://www.w3.org/2000/svg" p-id="1253" width="32" height="32"
                     fill="${getRandomColor()}"
            >
        <path d="M677.51936 192.03072c113.1008 0 204.8 91.6992 204.8 204.77952 0 
                 186.91072-370.3296 435.15904-370.3296 435.15904S141.68064 592.67072 141.68064 
                 396.81024c0-140.78976 91.6992-204.77952 204.77952-204.77952 68.11648 0 
                 128.28672 33.40288 165.5296 84.55168C549.24288 225.4336 609.41312 192.03072 
                 677.51936 192.03072z" p-id="1254"
        ></path>
      </svg>
    `
}
// 随机放大倍数
const getRandomNum = (scale) => Math.floor(Math.random()*scale+1);
const boxWidth = window.innerWidth;
const boxHeight = window.innerHeight;
setTimeout(function(){
    for (let i = 0; i <= n; i++) {
        const item = `heart_${i}`;
        const width = getRandomNum(boxWidth);
        const height = getRandomNum(boxHeight);
        const cWidth = getRandomNum(1000) - width;
        const cHeight = getRandomNum(1000) - height;
        document.getElementById(item).animate([
            { transform: `scale(${getRandomNum(2)})`,left: `0px`, top: `0px` },
            { transform: `scale(${getRandomNum(2)})`,left: `${boxWidth/2}px`, top: `${boxHeight/2}px` },
            { transform: `scale(${getRandomNum(2)})`,left: `${cWidth * 2}px`, top: `${cHeight * 2}px` },
        ], {
            duration: 9000,
            iterations: Infinity,
            easing: 'ease-in-out'
        });
    }
}, 100)
document.getElementById('heart').innerHTML = heartList;

聪明的你,再配上BGM,浪漫~


还能做更多有意思的小玩意,靠各位发挥啦。

故事结束

继续~


对了,送给学妹的代码我放在仓库:
https://github.com/pingan8787/Leo-JavaScript/blob/master/Leo-Demo/7-WeiteHeartPop.html

2019_07_12guild_page.png

查看原文

赞 14 收藏 6 评论 1

tommyZZM 关注了问题 · 2020-03-20

如何在web网页端使用视频硬解码(e.g. js libs, webRTC, etc)?

在做一个项目,类似直播但对延迟的要求更高一些,视频解码(h264)在网页端使用硬解码。

我现在chrome/firefox上测试过一个JS library叫Broadway,网页端每帧的解码时间大概30ms,这个数字只是单纯网页端解码,不包括任何数据传输,服务器编码或者网页render。
本人还是编解码小白,第一次接触相关知识,也许这个数字已经不算慢了,但有没有办法能实现在15ms之内的每帧解码?┑( ̄Д  ̄)┍

Broadway是一个JS library,只有单纯的软解码,所有load都在CPU上实现,想请问各位大神,有没有办法在web端实现硬解码,offload到GPU上面?跪求建议。

另外,想请问下,MediaSource Extension, WebRTC, WebAssembly这些技术是不是更适合?JS library毕竟只是JS层面,可能达不到延迟的要求。

关注 3 回答 1

tommyZZM 收藏了问题 · 2020-02-14

web pdf 在a标签加上download无效只预览

我在web实现预览pdf 只要href到文件链接浏览器会自动预览,但是我在a标签下加上download属性还是只预览不下载,这要怎么解决呢

tommyZZM 收藏了问题 · 2020-02-14

web pdf 在a标签加上download无效只预览

我在web实现预览pdf 只要href到文件链接浏览器会自动预览,但是我在a标签下加上download属性还是只预览不下载,这要怎么解决呢

tommyZZM 收藏了问题 · 2020-02-14

web pdf 在a标签加上download无效只预览

我在web实现预览pdf 只要href到文件链接浏览器会自动预览,但是我在a标签下加上download属性还是只预览不下载,这要怎么解决呢

tommyZZM 赞了回答 · 2020-02-14

解决web pdf 在a标签加上download无效只预览

a标签的属性仅适用于同源 URLs,跨域会导致download属性无效.
clipboard.png

关注 2 回答 1

tommyZZM 赞了问题 · 2020-02-14

解决web pdf 在a标签加上download无效只预览

我在web实现预览pdf 只要href到文件链接浏览器会自动预览,但是我在a标签下加上download属性还是只预览不下载,这要怎么解决呢

关注 2 回答 1

tommyZZM 回答了问题 · 2020-01-08

解决Sequelize hasOne报错

根据调试观察,并且对比了一些例子(包括官方文档)中的使用方式。

hasOnehasMany等建立映射关系的方法,都是有全局性质的,可能是有副作用的

因此映射关系应该类似modle在运行时中只定义一次,而不应该在请求function中多次执行。

会报错的case

async function responseXXX(id) {
  return models.Users.findAll({
    where: { id },
    include: [{
      model.Users.hasOne(model.Roles, { // 每次执行都会重复定义这个关系,第一次响应是正常的,第二次就会报错
        foreignKey: 'id',
        as: 'UserRoles',
      }),
    }]
  })
}

正确的case


const UsersHasOneRoles = model.Users.hasOne(model.Roles, { 
   // 最外部的作用域就定义一下这个映射关系,这样运行周期里只会执行一次
   foreignKey: 'id',
   as: 'UserRoles',
}),

async function responseXXX(id) {
  return models.Users.findAll({
    where: { id },
    include: [{
      association: UsersHasOneRoles // 这里再传入他,这个对象只是类似一个工厂函数,实际查询的时候findAll会找到最新的结果
    }]
  })
}

可能有用的资料:

关注 2 回答 3

tommyZZM 关注了问题 · 2019-12-28

TS 中的 export declare interface 和 export interface 到底有什么不同?

可能的参考资料:https://stackoverflow.com/que...

delcare var foo: string // 不会生成js定义
var foo: string; // 会生成js定义

上述两者很容易理解,因为生成的代码有实际的差异。

但是interfeace本来就是JavaScript不存在的东西,以下这两种情况实际到底有什么不同?

export declare interface {

}
export interface {

}

关注 4 回答 0

tommyZZM 提出了问题 · 2019-12-27

TS 中的 export declare interface 和 export interface 到底有什么不同?

可能的参考资料:https://stackoverflow.com/que...

delcare var foo: string // 不会生成js定义
var foo: string; // 会生成js定义

上述两者很容易理解,因为生成的代码有实际的差异。

但是interfeace本来就是JavaScript不存在的东西,以下这两种情况实际到底有什么不同?

export declare interface {

}
export interface {

}

关注 4 回答 0

认证与成就

  • 获得 62 次点赞
  • 获得 50 枚徽章 获得 1 枚金徽章, 获得 14 枚银徽章, 获得 35 枚铜徽章

擅长技能
编辑

开源项目 & 著作
编辑

  • alcedo

    一个基于TypeScript的HTML5游戏框架,毕业设计,算是阅读Egret和Pixi源码以后的心血来潮之作;

  • easy-imagemin

    简单的(基于Node.js)命令行压缩图片工具,轻松压缩文件夹里所有的图片,之前单位的小伙伴压缩大量图片的时候用。因为是命令行工具所以比tinypng方便。

注册于 2015-05-20
个人主页被 1.2k 人浏览