html flash 循环播放,10个HTML5动画,让你忘掉Flash是啥

你最近可能已经听到了很多关于Flash是面临垂死挣扎的技术以及它将如何很快被HTML5的取代。就个人而言,我认为HTML5会慢慢取代一些Flash的东西,但Flash会永远有它的一席之地,特别是开发复杂的游戏和丰富的互联网应用。如果你还没有看到HTML5动画是怎么样做的,我这里收集了10个演示,显示了它的一些出色的动画能力。

那么,你认为——HTML5会取代Flash吗?

0818b9ca8b590ca3270a3433284dd417.png

(字体动画,可以输入文字自定义,不过就像世界上很多东西一样,这个也不支持中文。)

0818b9ca8b590ca3270a3433284dd417.png

(这一个真实吓我一跳,截图是著名的C60分子结构,3D动画,很多自定义选项,真的跟Flash没什么两样。点击左边列表还可以看到更多3D动画的分子结构。)

0818b9ca8b590ca3270a3433284dd417.png

(这个cb之前新闻贴过了。点击上面的方块就显示出图片。)

0818b9ca8b590ca3270a3433284dd417.png

(布料模拟动画,接触过3D的人应该知道这种效果。)

0818b9ca8b590ca3270a3433284dd417.png

(一个游戏动画,用画笔一些东西,点击时钟之后这些物体会受重力掉下来,游戏我没去细看,动画亮点就是模拟重力和刚性反弹吧。)

0818b9ca8b590ca3270a3433284dd417.png

(可旋转的立体盒子,可以在上面输入内容然后点搜索,盒子就打开,不过好像没搜索出内容。)

0818b9ca8b590ca3270a3433284dd417.png

(流体粒子动画,也是3D动画的一个手段。不过如果像那些3D软件一样粒子可以替代成物体,那真是太伟大了。)

0818b9ca8b590ca3270a3433284dd417.png

(星云动画,通过静态图片实现。个人认为早前的Javascript也能实现,不过可能效果没那么好。)

0818b9ca8b590ca3270a3433284dd417.png

(弹性球动画。模拟重力和弹性。)

0818b9ca8b590ca3270a3433284dd417.png

(几个漂浮的泡泡是画笔,可以在画布上画画。)

(作为动画,有很多种形式,时间轴动画,重力模拟,软体模拟,弹性等多种动画效果。其实所看到的HTML5动画相比以前的看到的并非有很多高明之处,最大的区别可能就是HTML5新元素画布,这个元素的动画可操作性相比图片要好很多。不过我觉得在IT业界里,事物的新颖与否并非全在于技术的革新,而在于概念的新鲜,就像当初的Ajax一样,技术没什么变化,但是带来了极好的用户体验。)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 以下是一个示例代码,它使用了 HttpServletRequest 对象来读取 HTTP 头部信息,并使用正则表达式来判断设备类型: ```java import javax.servlet.http.HttpServletRequest; import java.util.regex.Pattern; public class DeviceUtils { private static final String[] mobileUserAgent = { "iphone", "android", "phone", "mobile", "wap", "netfront", "java", "opera mobi", "opera mini", "ucweb", "windows ce", "symbian", "series", "webos", "sony", "blackberry", "dopod", "nokia", "samsung", "palmsource", "xda", "pieplus", "meizu", "midp", "cldc", "motorola", "foma", "docomo", "up.browser", "up.link", "blazer", "helio", "hosin", "huawei", "novarra", "coolpad", "webos", "techfaith", "palmsource", "alcatel", "amoi", "ktouch", "nexian", "ericsson", "philips", "sagem", "wellcom", "bunjalloo", "maui", "smartphone", "iemobile", "spice", "bird", "zte-", "longcos", "pantech", "gionee", "portalmmm", "jig browser", "hiptop", "benq", "haier", "^lct", "320x320", "240x320", "176x220" }; private static final String[] pcHeaders = { "Windows 98", "Windows ME", "Windows 2000", "Windows XP", "Windows NT", "Ubuntu" }; private static final String[] mobileHeaders = { "iPad", "iPhone", "Android", "Pocket", "Sony", "BlackBerry", "WebOS", "HP iPAQ", "Smartphone", "IEMobile", "Windows Phone", "Acer Iconia Tab A500", "Asus Eee Pad Transformer TF101", "Samsung Galaxy Tab", "HTC Flyer" }; private static final String[] botHeaders = { "Googlebot", "Baiduspider", "Yahoo!", "Yahoo Slurp", "DoCoMo", "Sosospider", "Sogou spider", "ia_archiver", "Twiceler" }; public static DeviceType getDeviceType(HttpServletRequest request) { DeviceType deviceType = DeviceType.UNKNOWN; String userAgent = request.getHeader("User-Agent"); if (userAgent != null) { userAgent = userAgent.toLowerCase(); // 匹配 if (Pattern.compile(".*(" + String.join("|", mobileUserAgent) + ").*").matcher(userAgent).matches()) { deviceType = DeviceType.MOBILE; } else if (Pattern.compile(".*(" + String.join("| ### 回答2: 要根据HTTP头部信息判断设备类型,可以使用Java的Servlet来实现。以下是一个示例代码: ``` import javax.servlet.http.HttpServletRequest; public class DeviceTypeChecker { public static DeviceType getDeviceType(HttpServletRequest request) { String userAgent = request.getHeader("User-Agent"); if (userAgent != null && !userAgent.isEmpty()) { if (userAgent.toLowerCase().contains("mobile")) { return DeviceType.MOBILE; } else if (userAgent.toLowerCase().contains("tablet")) { return DeviceType.TABLET; } else if (userAgent.toLowerCase().contains("tv")) { return DeviceType.TV; } } return DeviceType.DESKTOP; } public enum DeviceType { DESKTOP, MOBILE, TABLET, TV } } ``` 以上代码中,我们通过HttpServletRequest的getHeader方法获取HTTP请求的User-Agent头部信息。然后根据包含的关键字判断设备类型,如果包含"mobile"则返回MOBILE,如果包含"tablet"则返回TABLET,如果包含"tv"则返回TV,否则返回DESKTOP。 在使用时,可以在Servlet中使用如下方式获取设备类型: ``` import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; import java.io.PrintWriter; public class MyServlet extends HttpServlet { @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException { // 获取设备类型 DeviceTypeChecker.DeviceType deviceType = DeviceTypeChecker.getDeviceType(request); // 根据设备类型做相应处理 if (deviceType == DeviceTypeChecker.DeviceType.MOBILE) { // 手机设备处理逻辑 } else if (deviceType == DeviceTypeChecker.DeviceType.TABLET) { // 平板设备处理逻辑 } else if (deviceType == DeviceTypeChecker.DeviceType.TV) { // 电视设备处理逻辑 } else { // 桌面设备处理逻辑 } // 返回响应 PrintWriter writer = response.getWriter(); writer.println("Device Type: " + deviceType); writer.close(); } } ``` 以上示例中,我们通过调用DeviceTypeChecker.getDeviceType(request)方法获取设备类型,然后根据不同设备类型做相应处理。在返回响应时,我们将设备类型输出到客户端。 ### 回答3: 要根据HTTP头部信息判断设备类型,可以使用Java语言编写以下代码: ```java import javax.servlet.http.HttpServletRequest; public class DeviceTypeChecker { public String getDeviceType(HttpServletRequest request) { String userAgent = request.getHeader("User-Agent"); String deviceType = "Unknown"; if(userAgent.contains("Android")) { deviceType = "Android"; } else if(userAgent.contains("iPhone") || userAgent.contains("iPad")) { deviceType = "iOS"; } else if(userAgent.contains("Windows Phone")) { deviceType = "Windows Phone"; } return deviceType; } } ``` 以上代码通过传入HttpServletRequest对象获取HTTP头部信息中的User-Agent字段,并根据其包含的关键词判断设备类型。如果User-Agent中包含"Android"关键词,则设备类型为Android;如果包含"iPhone"或"iPad"关键词,则设备类型为iOS;如果包含"Windows Phone"关键词,则设备类型为Windows Phone。如果User-Agent中不包含任何关键词,则设备类型为Unknown。 使用该代码时,可以通过以下方式调用: ```java HttpServletRequest request = // 获取请求对象的代码 DeviceTypeChecker deviceTypeChecker = new DeviceTypeChecker(); String deviceType = deviceTypeChecker.getDeviceType(request); System.out.println("设备类型:" + deviceType); ``` 请注意,由于不同设备的User-Agent格式可能不同,以上代码只是简单判断了一些常见的关键词,并不能完全覆盖所有设备类型。如果需要更准确地判断设备类型,可以根据具体需求进行适当的调整。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值