520爱心时钟动画

2024-05-30 00:58
文章标签 时钟 动画 520 爱心

本文主要是介绍520爱心时钟动画，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1.Index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>于大博</title></head>
<body>
<canvas id="canvas"></canvas>
<script type="text/javascript" src="./js/digit.js"></script>
<script type="text/javascript" src="./js/app.js"></script>
<div style="text-align:center;margin-top:-200px; color:red; font:normal 14px/24px 'MicroSoft YaHei';"><h2>于大博</h2><p>2021年5月20日</p>
</div>
</body>
</html>

2.digit.js

digit =
[[[0,0,1,1,1,0,0],[0,1,1,0,1,1,0],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[0,1,1,0,1,1,0],[0,0,1,1,1,0,0]],//0[[0,0,0,1,1,0,0],[0,1,1,1,1,0,0],[0,0,0,1,1,0,0],[0,0,0,1,1,0,0],[0,0,0,1,1,0,0],[0,0,0,1,1,0,0],[0,0,0,1,1,0,0],[0,0,0,1,1,0,0],[0,0,0,1,1,0,0],[1,1,1,1,1,1,1]],//1[[0,1,1,1,1,1,0],[1,1,0,0,0,1,1],[0,0,0,0,0,1,1],[0,0,0,0,1,1,0],[0,0,0,1,1,0,0],[0,0,1,1,0,0,0],[0,1,1,0,0,0,0],[1,1,0,0,0,0,0],[1,1,0,0,0,1,1],[1,1,1,1,1,1,1]],//2[[1,1,1,1,1,1,1],[0,0,0,0,0,1,1],[0,0,0,0,1,1,0],[0,0,0,1,1,0,0],[0,0,1,1,1,0,0],[0,0,0,0,1,1,0],[0,0,0,0,0,1,1],[0,0,0,0,0,1,1],[1,1,0,0,0,1,1],[0,1,1,1,1,1,0]],//3[[0,0,0,0,1,1,0],[0,0,0,1,1,1,0],[0,0,1,1,1,1,0],[0,1,1,0,1,1,0],[1,1,0,0,1,1,0],[1,1,1,1,1,1,1],[0,0,0,0,1,1,0],[0,0,0,0,1,1,0],[0,0,0,0,1,1,0],[0,0,0,1,1,1,1]],//4 hovertree.com[[1,1,1,1,1,1,1],[1,1,0,0,0,0,0],[1,1,0,0,0,0,0],[1,1,1,1,1,1,0],[0,0,0,0,0,1,1],[0,0,0,0,0,1,1],[0,0,0,0,0,1,1],[0,0,0,0,0,1,1],[1,1,0,0,0,1,1],[0,1,1,1,1,1,0]],//5[[0,0,0,0,1,1,0],[0,0,1,1,0,0,0],[0,1,1,0,0,0,0],[1,1,0,0,0,0,0],[1,1,0,1,1,1,0],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[0,1,1,1,1,1,0]],//6[[1,1,1,1,1,1,1],[1,1,0,0,0,1,1],[0,0,0,0,1,1,0],[0,0,0,0,1,1,0],[0,0,0,1,1,0,0],[0,0,0,1,1,0,0],[0,0,1,1,0,0,0],[0,0,1,1,0,0,0],[0,0,1,1,0,0,0],[0,0,1,1,0,0,0]],//7[[0,1,1,1,1,1,0],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[0,1,1,1,1,1,0],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[0,1,1,1,1,1,0]],//8[[0,1,1,1,1,1,0],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[0,1,1,1,0,1,1],[0,0,0,0,0,1,1],[0,0,0,0,0,1,1],[0,0,0,0,1,1,0],[0,0,0,1,1,0,0],[0,1,1,0,0,0,0]],//9[[0,0,0,0],[0,0,0,0],[0,1,1,0],[0,1,1,0],[0,0,0,0],[0,0,0,0],[0,1,1,0],[0,1,1,0],[0,0,0,0],[0,0,0,0]]//:
];

3.app.js 

var canvas,ctx;var hours,minutes,seconds;var hearts = [];var width;var marginTop,marginLeft;window.onload = app;function app(){init();gameloop();
}function init(){canvas = document.getElementById("canvas");ctx = canvas.getContext("2d");w = window.innerWidth;h = window.innerHeight;var d = new Date();hours = d.getHours();minutes = d.getMinutes();seconds = d.getSeconds();canvas.width = w;canvas.height = h;width = new Heart().size.width;marginTop = 150;marginLeft = (w - 63*width)/2;
}function gameloop(){requestAnimationFrame(gameloop);render();update();
}function Heart(scale){scale = scale || 0.5;this.point = [];this.size = {};this.centerPoint = {};this.init(scale);
}
Heart.prototype.init = function(scale){var xArr = [],yArr = [];for(var i=10;i<30;i+=0.2){var t = i/Math.PI,x = scale * 16 * Math.pow(Math.sin(t),3),y = -scale * (13 * Math.cos(t) - 5 * Math.cos(2*t) - 2 * Math.cos(3 * t) - Math.cos(4*t));this.point.push({x:x,y:y});xArr.push(x);yArr.push(y);}this.getCenter(xArr,yArr);this.getSize(xArr,yArr);
}
Heart.prototype.draw = function(translateX,translateY,color){this.translateX = translateX;this.translateY = translateY;ctx.save();ctx.fillStyle =  color || "#f00";ctx.translate(translateX,translateY);ctx.beginPath();for(var i=0,len=this.point.length;i<len;i++){var point = this.point[i];if(i===0){ctx.moveTo(point.x,point.y);}else{ctx.lineTo(point.x,point.y);}}ctx.closePath();ctx.fill();ctx.restore();
}
Heart.prototype.getCenter = function(xArr,yArr){this.centerPoint = {x : getMValue(Math.min.apply(null, xArr),Math.max.apply(null, xArr)),y : getMValue(Math.min.apply(null, yArr),Math.max.apply(null, yArr))};
}
Heart.prototype.getSize = function(xArr,yArr){this.size = {width : Math.abs(Math.min.apply(null, xArr) - Math.max.apply(null, xArr)),height : Math.abs(Math.min.apply(null, yArr) - Math.max.apply(null, yArr))};
}
function getMValue(min,max){return min + (max - min) / 2;
}
function renderDigit(x,y,num){for(var i=0;i<digit[num].length;i++){for(var j=0;j<digit[num][i].length;j++){if(digit[num][i][j]===1){var heart = new Heart();var translateX = Math.abs(heart.centerPoint.x - heart.size.width/2 - (x+j*heart.size.width)),translateY = Math.abs(heart.centerPoint.y - heart.size.height/2 - (y+i*heart.size.width));heart.draw(translateX,translateY);}}}
}
function update(){var td = new Date(),nexthours = td.getHours(),nextminutes = td.getMinutes(),nextseconds = td.getSeconds();if(seconds != nextseconds){if(parseInt(nexthours/10) != parseInt(hours/10)){addBalls(marginLeft,marginTop,parseInt(hours/10));}if(parseInt(nexthours%10) != parseInt(hours%10)){addBalls(marginLeft + 9 * width,marginTop,parseInt(hours%10));}if(parseInt(nextminutes/10) != parseInt(minutes/10)){addBalls(marginLeft + 23 * width,marginTop,parseInt(minutes/10));}if(parseInt(nextminutes%10) != parseInt(minutes%10)){addBalls(marginLeft + 32 * width,marginTop,parseInt(minutes%10));}if(parseInt(nextseconds/10) != parseInt(seconds/10)){addBalls(marginLeft + 46 * width,marginTop,parseInt(seconds/10));}if(parseInt(nextseconds%10) != parseInt(seconds%10)){addBalls(marginLeft + 55 * width,marginTop,parseInt(seconds%10));}seconds = nextseconds;hours = nexthours;minutes = nextminutes;}for(var i=0;i<hearts.length;i++){var heart = hearts[i];heart.tx += heart.vx;heart.ty += heart.vy;heart.vy += heart.g;if(heart.ty>=h){hearts.splice(i,1);}}
}
function addBalls(x,y,num){for(var i=0;i<digit[num].length;i++){for(var j=0;j<digit[num][i].length;j++){	if(digit[num][i][j]===1){var heart = new Heart();var translateX = Math.abs(heart.centerPoint.x - heart.size.width/2 - (x+j*heart.size.width)),translateY = Math.abs(heart.centerPoint.y - heart.size.height/2 - (y+i*heart.size.width));hearts.push({heart : heart,tx : translateX,ty : translateY,vx : (Math.random()>0.5?1:-1) * 4,vy : -10,g : 1.5 + Math.random(),color : 'rgb(' + Math.floor(Math.random()*255) + "," + Math.floor(Math.random()*255) + ","  + Math.floor(Math.random()*255) + ")"})}}}
}
function render(){ctx.clearRect(0,0,w,h);renderDigit(marginLeft,marginTop,parseInt(hours/10));renderDigit(marginLeft + 9 * width,marginTop,parseInt(hours%10));renderDigit(marginLeft + 18 * width,marginTop,10);renderDigit(marginLeft + 23 * width,marginTop,parseInt(minutes/10));renderDigit(marginLeft + 32 * width,marginTop,parseInt(minutes%10));renderDigit(marginLeft + 41 * width,marginTop,10);renderDigit(marginLeft + 46 * width,marginTop,parseInt(seconds/10));renderDigit(marginLeft + 55 * width,marginTop,parseInt(seconds%10));for(var i=0;i<hearts.length;i++){var heart = hearts[i];heart.heart.draw(heart.tx,heart.ty,heart.color);}
}

4.效果图

这篇关于520爱心时钟动画的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1015133。

相关文章

Kotlin Compose Button 实现长按监听并实现动画效果(完整代码)

Kotlin Compose Button 实现长按监听并实现动画效果(完整代码)

《KotlinComposeButton实现长按监听并实现动画效果(完整代码)》想要实现长按按钮开始录音,松开发送的功能,因此为了实现这些功能就需要自己写一个Button来解决问题,下面小编给大... 目录Button 实现原理1. Surface 的作用（关键）2. InteractionSource3.
阅读更多...
使用WPF实现窗口抖动动画效果

使用WPF实现窗口抖动动画效果

《使用WPF实现窗口抖动动画效果》在用户界面设计中,适当的动画反馈可以提升用户体验,尤其是在错误提示、操作失败等场景下,窗口抖动作为一种常见且直观的视觉反馈方式,常用于提醒用户注意当前状态,本文将详细... 目录前言实现思路概述核心代码实现1、 获取目标窗口2、初始化基础位置值3、创建抖动动画4、动画完成后
阅读更多...
使用animation.css库快速实现CSS3旋转动画效果

使用animation.css库快速实现CSS3旋转动画效果

《使用animation.css库快速实现CSS3旋转动画效果》随着Web技术的不断发展，动画效果已经成为了网页设计中不可或缺的一部分，本文将深入探讨animation.css的工作原理，如何使用以及... 目录1. css3动画技术简介2. animation.css库介绍2.1 animation.cs
阅读更多...
基于Canvas的Html5多时区动态时钟实战代码

基于Canvas的Html5多时区动态时钟实战代码

《基于Canvas的Html5多时区动态时钟实战代码》：本文主要介绍了如何使用Canvas在HTML5上实现一个多时区动态时钟的web展示，通过Canvas的API，可以绘制出6个不同城市的时钟，并且这些时钟可以动态转动，每个时钟上都会标注出对应的24小时制时间，详细内容请阅读本文，希望能对你有所帮助...
阅读更多...
最好用的WPF加载动画功能

最好用的WPF加载动画功能

《最好用的WPF加载动画功能》当开发应用程序时,提供良好的用户体验（UX）是至关重要的,加载动画作为一种有效的沟通工具,它不仅能告知用户系统正在工作,还能够通过视觉上的吸引力来增强整体用户体验,本文给... 目录前言需求分析高级用法综合案例总结最后前言当开发应用程序时，提供良好的用户体验（UX）是至关重要
阅读更多...
基于Python实现PDF动画翻页效果的阅读器

基于Python实现PDF动画翻页效果的阅读器

《基于Python实现PDF动画翻页效果的阅读器》在这篇博客中,我们将深入分析一个基于wxPython实现的PDF阅读器程序,该程序支持加载PDF文件并显示页面内容,同时支持页面切换动画效果,文中有详... 目录全部代码代码结构初始化 UI 界面加载 PDF 文件显示 PDF 页面页面切换动画运行效果总结主
阅读更多...
Qt QWidget实现图片旋转动画

Qt QWidget实现图片旋转动画

《QtQWidget实现图片旋转动画》这篇文章主要为大家详细介绍了如何使用了Qt和QWidget实现图片旋转动画效果,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 一、效果展示二、源码分享本例程通过QGraphicsView实现svg格式图片旋转。.hpjavascript
阅读更多...
【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
第10章 中断和动态时钟显示

第10章 中断和动态时钟显示

第10章 中断和动态时钟显示 从本章开始，按照书籍的划分，第10章开始就进入保护模式（Protected Mode）部分了，感觉从这里开始难度突然就增加了。 书中介绍了为什么有中断（Interrupt）的设计，中断的几种方式：外部硬件中断、内部中断和软中断。通过中断做了一个会走的时钟和屏幕上输入字符的程序。 我自己理解中断的一些作用： 为了更好的利用处理器的性能。协同快速和慢速设备一起工作
阅读更多...
Flutter 进阶：绘制加载动画

Flutter 进阶：绘制加载动画

绘制加载动画：由小圆组成的大圆 1. 定义 LoadingScreen 类2. 实现 _LoadingScreenState 类3. 定义 LoadingPainter 类4. 总结 实现加载动画 我们需要定义两个类：LoadingScreen 和 LoadingPainter。LoadingScreen 负责控制动画的状态，而 LoadingPainter 则负责绘制动画。
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2