HTML 5 动态效果制作方法整理

h5页面路由切换动画-左右横滑效果(v2) h5实现仿微信那种页面切换时左右横滑的动画效果,页面前进时新页面从右往左滑,页面后退时旧页面从左往右滑。 阅读详情

0.备注

如果发现有某些图片未正常加载,可以点击下面链接,查看文章。

HTML 5 动态效果制作方法整理

1.前言

随着时代的发展和进步,越来越多的开发者开始在前端界面中加入动态效果。

那么我们今天就一起来整理和分享一下前端动态效果的制作方法,并对其中的 Canvas 进行一下简单的讲解。

2.动态效果的分类

我们首先先来简单看一下,动态效果的制作有哪些分类?

3.GIF

首先第一个就是我们的 gif 图片,这是一种非常简单,但却高效的动态图制作方式。

GIF图片擅长于制作细节的小动画,位图,优势在于 “体型”很小,可压缩,制作成本低,以图片的形态适用于各种操作系统,无兼容性的后顾之忧。制作GIF动画的方式有很多,例如我们所熟悉的Photoshop时间轴,或是利用Flash,AE将动画导出存成GIF格式等等。

GIF动画最常在H5动效里当担loading导航条,热门小标签等元素,要把控图片大小和精度之间的平衡,所以它一般用于制作小细节的动画。

H5页面承载GIF图片的方式相对以下要介绍的其他方法,是最省成本,最为简便的。只需要以背景图片/内容图片的形式在页面上进行引用即可。

4.逐帧动画

有很多朋友读到这里,可能会觉得,逐帧动画跟 GIF 不应该是一样的么?

逐帧动画即是利用一张等间距的动画分解逐帧图片,一般是由js脚本模拟编写。

逐帧动画和GIF动画的差别在于,脚本可以控制逐帧动画的快慢和动作的暂停,而GIF动画无法在后期通过代码进行动画速率及透明度的修改。

做一个逐帧动画必不可缺的就是需要一张等间距的“动画分解逐帧图片.png”,之后我们就可以通过修改 background-position 来完成一个“逐帧动画”。

当然我们也可以通过设置特殊的图片,来完成一些特殊的效果。

5.CSS3 动画

CSS3应该是动画家族里绝对不会被遗忘的一名成员。这里我们定义它为**擅长于平面层的动画。**CSS3的缺陷应该在于它的部分属性还没有被浏览器有好的支持。

关于动画的应用和基础属性介绍在之前也已经介绍过了,如果小伙伴们忘记了,可以点击下面的链接去从新温习一下。

CSS3 动画

这里说个题外话,如何高质高效把动画设计传达给工程师呢?

Tips:建议使用“案例Demo或者分镜头脚本+动画属性分解表+素材切图”的套装!

以下图为例:这是一个点击反馈的小动画,在无法提供Demo的时候,我们可以使用”动画属性分解表”的方式。

动画属性分解表可以让工程师根据表格内填写的数值进行动画的编写,会比凭空的和工程师进行交流传达,来的更精准一些。

6.SVG

SVG,也是动效制作中不可忽略的一大热门方法,我们定义它为擅长于线条的动画,弊端是:IE8,Android4.2及以下支持不好。

看下图几个例子,涉及到这种沿着元素描边的动画,一般都是出自SVG之手啦,当然,它也可以实现一些复杂的动画,类似这个表情图片,不过实现成本是不太划算的。

知识普及:**SVG,可缩放矢量图形(Scalable Vector Graphics), 是被存成了 XML 格式的图像,它有一些特别的地方:

  • 可被多种工具读取和修改(比如记事本)
  • 尺寸更小,可压缩性更强
  • 矢量
  • 纯粹的 XML

一张SVG图,其实是由一堆的定位锚点连线生成的。所以它可以很方便的存为文档格式。而页面中的引用,也是简单的将此文本引入即可。

这里必须要注意的点是:如果你想制作一个SVG动画,请一定要使用AI工具绘制输出矢量图给到工程师同学哦。

如果大家有兴趣继续深入了解,可以点击下面的链接,这是我之前写的小教程,教大家如何通过 SVG 画出一只小狐狸。

SVG 的基础教程

7.Canvas

HTML5 的新元素 ,类似画板,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

本身是没有绘图能力的。所有的绘制工作必须依赖 JavaScript 完成。

我们定义它为**擅长于绘画的动画。

如下图,绘制这样一个大量元素下落的动画效果,就是Canvas所擅长的。

Canvas可以算是SVG的堂兄弟,大部分的图表动画,都是由Canvas或是SVG制作而成的,二者的动画能力相似但也有以下这些区别:

  • canvas是画框,有自己固定的高宽,svg是不依赖分辨率的矢量,可以任意放大缩小。
  • canvas能以.jpg的格式保存图像,svg是文本的格式保存图像
  • canvas绘制的图像不占DOM,而svg的每个图像都是1个DOM元素
  • canvas适合图像密集型的动画,而svg不适合大量使用,例如制作飘雪等
  • canvas完全依赖脚本绘制作,而svg可直接使用矢量转存生成。

之前我也专门写过 Canvas 的入门教程,如果大家忘记了,可以点击下面的链接,重新回顾一下。

Canvas 基础(一)

Canvas 基础(二)

8.Flash To Canvas

除去上面几种常见的手法,Flash转Canvas的方法也是今年特别火爆的一种形式。

既然提到曾经辉煌的Flash,那产出物必须离不开炫酷这个形容词:通过Flash cc制作复杂又精细的动画,导成Canvas文件,动画中的交互操作,依赖Create.js的脚步库完成。

因为 flash 转 Canvas 的实现成本实际上非常高,在这里也就不做更多的介绍了。

9.Video

video 作为 HTML 5 的新标签,有着许多非常强大的功能。

但是与之相对应的,它也因为兼容性的问题,存在了各种制约,但是无可否认,Video 在实现动态效果的方式和成本上,是其他方式无可比拟的。

10.JavaScript

其实,只要是涉及到交互反馈的动画,小至滚屏翻页,大到重力感应等都需要js进行处理脚步的编写。

也就是说,所有的动画特效都离不开Javascript同学的支持。

市面上有很多特别的Javascript脚本库,例如three.js,细细运用,就可以做出非同凡响的动画效果。

11.后记

这篇文章原本是想专门写 Canvas 的小效果的,结果“抄着抄着”就发现,已经写这么多了。

不过也无所谓了,大不了从新开一篇文章咯。

祝工作愉快!

本文摘自:《H5动效的常见制作手法》

H5引用序列帧图片实现动画效果 在 H5 中引用序列帧图片,通常用于实现帧动画的效果,例如加载动效或页面交互动画。 阅读详情

相关推荐

HTML5 + CSS3面试题整理,前端面试宝典

主要分成两部分:渲染引擎(layout engineer或Rendering Engine)和JS引擎渲染引擎:负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入CSS等),以及计算网页的显示方式,然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同,所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核JS引擎则:解析和执行javascript来实现网页的动态效果。

m0_61549740的博客 740

手把手教你如何设置H5页面动画效果

“H5”,这个由HTML5简化而来的词汇,借由微信这个移动社交平台,正在走进更多人的视野。本文聚焦于基于微信传播的H5页面的动画设计,希望与大家进行交流探讨。   首先我们选择H5页面制作平台,以“应用之星”平台为例。   第一步:进入网站,注册登录,点击“应用制作”,进入制作页面。      第二步:选择“高级模式”,点“+”创建应用,或者直接选择模板使用。   

ddwendy的专栏 1万+

HTML5 + CSS3面试题整理

1. 拖拽释放(Drag and drop) API 2. 语义化更好的内容标签(header,nav,footer,aside,article,section) 3. 音频、视频API(audio,video) 4. 画布(Canvas) API 5. 地理(Geolocation) API 6. 本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失; 7. sessionStorage 的数据在浏览器关闭后自动删除 8. 表单控件,calendar、date、time、email

m0_70275087的博客 1223

H5动画新利器:Svga和Lottie带你开启互动时代

Svga和lottie动画在h5的使用

weixin_43805705的博客 3335

H5网页CSS动画库,轻松实现动态效果

Animate.css是一个非常方便的CSS动画库,它提供了大量的预定义动画效果,使你能够轻松地为网页添加动态效果。但是,有一款名为Animate.css的CSS动画库正是为懒人设计的,它提供了大量的预定义动画效果,让你能够轻松地实现各种各样的动态效果,而无需从头开始编写代码。然后,在你的HTML文件中,使用link标签将Animate.css文件链接到你的网页中。无论你是一个经验丰富的开发者还是一个初学者,都可以通过使用Animate.css来为网页添加令人印象深刻的动画效果。类名指定了具体的动画效果。

HsvvDatabase的博客 1103

HTML、XHTML和HTML5系列对比

回首发现,前端的东西忘却的一干二净,简单的CSS样式和HTML标签都记不太清了,今天索性回顾一下,温故而知新。做了一些简单的整理,有兴趣的同学可以了解一下。

比起日出,我更喜欢日落。我的意思是比起遇见你,我更喜欢与你终老 1594

php动态效果,几种关于HTML 5 的动态效果制作方法

1.简介一个网站有动态效果会让网站显得更加有档次,会更吸引网友的目光,随着时代的发展和进步,越来越多的开发者开始在前端界面中加入动态效果。那么我们今天就一起来整理和分享一下前端动态效果的制作方法,并对其中的 Canvas 进行一下简单的讲解。2.动态效果的分类我们首先先来简单看一下,动态效果的制作有哪些分类?3.GIF首先第一个就是我们的 gif 图片,这是一种非常简单,但却高效的动态图制作方式。...

weixin_31085635的博客 410

ROS2实战:打造智能巡检机器人的关键技术与实现

本文详细介绍了基于ROS2和Navigation2构建智能巡检机器人的完整实战流程。通过设计主从协作的事件驱动架构,实现了机器人在已知地图中的自动导航、定点语音播报和环境图像采集功能。文章涵盖了从环境搭建、仿真配置到核心控制节点、语音服务与图像记录模块的代码实现,为开发者打造实用的自动巡检机器人提供了清晰的技术指南。

weixin_29031057的博客 222

html5 连线动态效果,解析html5canvas实现背景鼠标连线动态效果代码流

如何使用HTML5 Canvas动态的绘制拓扑图使用HTML5 Canvas动态的绘制拓扑图: HTML5中引入新的元素canvas,其drawImage 方法允许在 canvas 中插入其他图像( img 和 canvas 元素) 。drawImage函数有三种函数原型: 语法: drawImage(image, dx, dy) drawImage(image, dx, dy, dw, dh) ...

weixin_39610229的博客 515

Zynq UltraScale+网络加速方案:用AXI Ethernet Subsystem实现2.5G吞吐量的配置秘籍

本文详细介绍了在Xilinx Zynq UltraScale+平台上使用AXI Ethernet Subsystem实现2.5Gbps网络吞吐量的配置方法。通过硬件设计优化、Vivado工程配置、Linux驱动调优及性能测试等关键步骤,为工业视觉和5G前传等高速网络应用提供可靠解决方案。

weixin_30485379的博客 614

五段式S型算法笔记

又因为有 v-v0= 0.5jt通式: 所以有 vm-v0= 0.5jtm 所以有4vm-4v0= 2jtm。算法1: v=2vm-v0-0.5*jt+2jt*tm-2jtm*tm。加加速度j 自己设置 已知,vmax自己设置已知;所以有4vm-4v0= 2jtm带入算法1。

qq_36658033的博客 681

html5基础入门

本文将为你打开HTML5的大门,从基础入门开始,探索HTML5的新特性与用法。通过实用的示例和易懂的解释,我们将带你踏上一场前端编码的冒险,为未来的网页开发奠定坚实基础。

前端全栈大佬 7064

Cube生成定时器2触发双ADC同步采集并用DMA传输

前言 用cube生成一个用定时器触发ADC1,ADC2同步采集的程序,单片机选择的是STM32L476RGT6,用定时器2进行ADC采集触发,更改定时器2的定时周期便可以更改ADC的采样周期,ADC1和ADC2使用同步规则模式,并用DMA进行数据的传输。 STM32的ADC采样完成总共需要的时间是 ADC完成采样时间=采样周期+12个转换周期 举个例子,假如ADC的时钟是15MHz,采样周期是3个周期,3个采样周期加上12个转换周期,一共是15个周期,因为时钟是15MHz,所以完成一次ADC转换总共需要的时

一行代码的博客 4513

《Web前端设计基础HTML5CSS3JavaScript》课后答案整理:助你掌握前端核心技术

《Web前端设计基础HTML5CSS3JavaScript》课后答案整理:助你掌握前端核心技术 去发现同类优质开源项目:https://gitcode.com/ 项目的核心功能/场景 整理并提供《Web前端设计基础HTML5CSS3JavaScript》课后习题答案,助力学习者巩固前端基础知识。 项目介绍 在当今互联网时代,Web前端技术已成为网页设计与开发不可或缺的核心部分。《Web前端设计基础...

gitblog_06716的博客 486

Circos图审美拯救计划:用TBtools复刻Nature级共线性分析图谱

本文针对Circos图在共线性分析中的审美提升问题,提供了一套基于TBtools的完整优化方案。通过构建和谐的色彩体系、精细控制信息层布局以及模仿顶刊构图逻辑,详细讲解了如何从配色、透明度、标签显示到高级参数设置,将默认图表升级为具有高级学术美感的Nature级图谱,助力研究者提升论文图表质量。

cherry的博客 911

基于opencv人脸识别实现课堂抬头率检测系统 完整代码 可直接运行 作为毕设

基于opencv人脸识别实现课堂抬头率检测系统 完整代码 可直接运行 作为毕设

机器学习深度学习业余选手 1146

网站导航栏如何实现动态效果

  导航栏是每一个网站都要有的,那么对于一般的导航栏制作,相信大家都会,而且也不会遇到什么麻烦,但是如何才能让网站导航栏实现动态效果估计这会难倒很多技术人员,那么下面就来为大家分析解答一下。 Html代码: <html> <head> <title>导航演示</title> <meta charset="UTF-8"> &lt..

燚轩软件科技 5972

SpringBoot 教程:SpringBoot多种方式实现静态Html页面跳转

本教程介绍了 Spring Boot 中实现静态 Html 页面跳转的常用方法,包括重定向跳转、直接返回 ModelAndView 对象以及使用 Thymeleaf 模板引擎。如果你的项目中使用了 Thymeleaf 模板引擎,那么可以利用它来实现静态页面的跳转。对于静态的 Html 页面,我们可以使用多种方式来实现跳转功能。重定向是一种常见的页面跳转方式,它通过发送 HTTP 重定向响应头来告知浏览器跳转到指定的页面。在 Spring Boot 中,我们可以将视图名称设置为静态页面的路径。

2301_79325657的博客 2448

HTML5基础

HTML是HyperText Markup Language(超文本标记语言)的缩写,用于创建网页的标准标记语言。HTML使用标记标签来描述网页,由浏览器来解析,即使用HTML来建立Web站点,通过Web浏览器读取HTML文档,并以网页的形式显示出来。HTML5是HTML最新的修订版本。任何一个网页都是由一行行的HTML代码编写而成。HTML5除了本身的标记外,广义上还包含CSS3 与 JavaScript。HTML5的特点头部只需要写、、

wkk的博客 2378

【服务器电源架构与关键技术发展趋势】深度解析架构、方案、玩家与未来趋势

技术维度:台达 / 光宝在高功率密度(97%+ 效率)和垂直整合上领先,大陆厂商(麦格米特 / 欧陆通)在成本控制和快速响应上更优,国际厂商(英飞凌)聚焦核心器件突破。 客户维度:台达绑定英伟达核心供应链,麦格米特 / 欧陆通兼顾国内外客户,光宝 / 中恒电气侧重云端与互联网厂商。 趋势适配:所有厂商均加速布局 800V 高压架构、液冷技术和高功率 Power Shelf,以应对 AI 服务器单柜功率从 10kW→200kW 的升级需求。

昔时扬尘处 723

Probability and Statistics - 4th edition

Probability and Statistics - 4th edition

2024跨年烟花代码HTML5夜景放烟花绽放动画效果

HTML5夜景放烟花绽放动画效果 html代码 新建文件夹img把以下两张图片放进去 city.png moon.png 【整理代码】,解决乱码和文字弹太慢问题:https://download.youkuaiyun.com/download/Timi2019/87263438

pangjiaqian的博客 2908

VC中sqlite的使用

在VC中对sqlite的使用,实现数据库大批数据的快速插入,读取数据库中的数据在ListCtrl中显示

前端必会html知识整理

1.浏览器内核: 1.ie:trident(三叉戟)内核 2.firefox:gecko(壁虎)内核 3.safari:webkit(浏览器核心)内核 4.opera:以前是presto(急速)内核,现在改用谷歌的blink(闪烁)内核 5.Chorme:blink(基于webkit,谷歌和oper...

dianfu4327的博客 1157

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain's apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath('DeepLearnToolbox'));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand('state',0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W'); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand('state',0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = 'sigm';%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, 'Too big error');```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand('state',0)sae = saesetup([784 100]);sae.ae{1}.activation_function = 'sigm';sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)')% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = 'sigm';nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, 'Too big error');```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x',28,28,60000))/255;test_x = double(reshape(test_x',28,28,10000))/255;train_y = double(train_y');test_y = double(test_y');%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you'll get around 1.2% errorrand('state',0)cnn.layers = { struct('type', 'i') %input layer struct('type', 'c', 'outputmaps', 6, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %sub sampling layer struct('type', 'c', 'outputmaps', 12, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, 'Too big error');```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand('state',0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, 'Too big error');%% ex2 neural net with L2 weight decayrand('state',0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex3 neural net with dropoutrand('state',0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex4 neural net with sigmoid activation functionrand('state',0)nn = nnsetup([784 100 10]);nn.activation_function = 'sigm'; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex5 plotting functionalityrand('state',0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = 'softmax'; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand('state',0)nn = nnsetup([784 20 10]); nn.output = 'softmax'; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

HTML标签meta总结,HTML5 head meta 属性整理

前言 meta是html语言head区的一个辅助性标签。也许你认为这些代码可有可无。其实如果你能够用好meta标签,会给你带来意想不到的效果,meta标签的作用有:搜索引擎优化(SEO),定义页面使用语言,自动刷新并指向新的页面,实现网页转换时的动态效果,控制页面缓冲,网页定级评价,控制网页显示的窗口等! html的meta总结 meta标签的组成:meta标签共有两个属性,它们分别是htt...

黑夜人的博客 2361

HTML5 Canvas学习资源

本文全面介绍HTML5 Canvas游戏开发的学习路径,从基础入门到进阶实战。首先推荐MDN、W3Schools等权威文档和基础教程,掌握Canvas核心API;其次介绍YouTube和B站的优质视频教程,包括Chris Courses、李立超等系列;推荐两本经典书籍帮助系统构建知识体系;详细分析Phaser.js、PixiJS等主流框架的特点与学习资源;最后提供贪吃蛇、打砖块等开源项目源码及在线示例,帮助学习者通过模仿→修改→创造的方式快速提升。全文提供各阶段对应的学习资源链接,适合不同基础的学习者选择。

漫画之迷学编程 787

HTML5,不只是看上去很美(第四弹:可交互地铁线路图)

用TWaver HTML5制作的上海地铁图,一个简单实用的小应用,具有纯矢量、可交互、有动态效果、无失真缩放等特点。可以方便扩展各种实用功能,也可以稍加改造应用于高铁、公交等类似图形展示。

TWaver可视化 1万+

HTML面试题整理总结

前记 为了准备春招面试,对自己的知识点进行一个总结积累,第一篇是关于HTML方面的知识点,后续如果遇见新题会进行继续的补充 什么是 HTML 语义化,有什么好处 HTML语义化简单来说就是,段落使用&lt;p&gt;&lt;/p&gt;,侧边栏用&lt;aside&gt;&lt;/aside&gt;,主要内容使用&lt;main&gt;&...

weixin_34337265的博客 90
上一篇: 面试大联盟-XHTML阶段
下一篇: Canvas 效果实例
MR_LP
博客等级 码龄11年 236粉丝 89原创
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值