2019独角兽企业重金招聘Python工程师标准>>>

J-Focus是一个开源的动画应用框架，使用它可以方便快速地实现各种过渡动画效果。大大地降低了在实际开发工程中制作开发难度以及复杂程度。以下是J-Focus的使用方法。

首先，到https://sourceforge.net/projects/jfocus/files/latest/download这里下载J-Focus。解压压缩包后可以看到可以看到如下图的目录结构：

    其中cn目录和jfocus.js为框架文件;另外Demo目录是一些使用J-Focus开发的例子；Docs目录是类文档说明，介绍了每个类的方法和属性。screenshot目录就是一些例子的截图。那么，做开发时只要把cn目录和jfocus.js拷贝出来即可。

接下来就是新建一份网页文档，为了方便演示这里采用的是html静态页面。然后只要把jfocus.js引入到该文档里面即可。代码如下：

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>hitTestDemo</title><script language="javascript" type="text/javascript" src="jfocus.js"></script><script language="javascript" type="text/javascript">initializeJFocus();</script>
</head><body>
</body>
</html>

这里要说的是initializeJFocus方法，此方法用于初始化框架，必须调用的，否则导致框架无法使用。需要说明的是此方法接收一个参数，是指定框架目录与文档的相对路径。如果在同一个目录则可以不传递任何参数，否则需要传一个相对路径作为参数值。并且在引入其他框架类（即调用importClass方法）时需要指定第二个参数为true。代码如下：

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>hitTestDemo</title><script language="javascript" type="text/javascript" src="../jfocus.js"></script><script language="javascript" type="text/javascript">initializeJFocus("../");importClass("cn/vimfung/jfocus/tween/Manager.js",true);importClass("cn/vimfung/jfocus/tween/Job.js",true);importClass("cn/vimfung/jfocus/tween/easing/Quart.js",true);</script>
</head><body>
</body>
</html>

上面的步骤就是把框架引入到文档中并且进行初始化，接下来要做的事情是要为文档构建一个应用类对象（Application），每个文档仅存在一个应用类对象。只有成功创建了应用类对象后才能实现各种动画效果。其中代码如下所示：

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>hitTestDemo</title><script language="javascript" type="text/javascript" src="jfocus.js"></script><script language="javascript" type="text/javascript">initializeJFocus(); </script>
</head><body><script language="javascript" type="text/javascript">var application = initializeApplication(30);</script>
</body>
</html>

调用initializeApplication方法进行初始化应用类对象，其中传入一个帧速的参数，表示以每秒多少帧的速度运行，上面例子中的是30帧/秒。然后方法返回一个应用类对象，使用此对象可以加入一些可视化对象，如：Sprite、Image等。如下面代码所示：

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>hitTestDemo</title><script language="javascript" type="text/javascript" src="jfocus.js"></script><script language="javascript" type="text/javascript">initializeJFocus();</script>
</head><body><script language="javascript" type="text/javascript">var application = initializeApplication(30);application.backgroundColor = "black";var d = new NS_DISPLAY.Sprite("demoSprite");application.addEventListener(NS_EVENTS.Event.LOAD,applicationLoadHandler);function applicationLoadHandler(event){d.backgroundColor = "white";d.x = 300;d.y = 300;d.width = 100;d.height = 100;application.addChild(d);}</script>
</body>
</html>

上面的代码加入了一个100*100的Sprite对象到应用中。需要说明的是每一个类都存在于一个名称空间中，如：NS_DISPLAY其代表了cn.vimfung.jfocus.display名称空间。此名称空间变量是以"NS_"+"第四级名称"+"_第五级名称" +　"……"的方式命名。因此，创建类对象时要先了解类所在名称空间，以避免不必要的错误。

以上内容是使用J-Focus框架的基本步骤。在往后的日子里面，我会发布J-Focus的各种特性的使用文章，希望大家支持！！

转载于:https://my.oschina.net/vimfung/blog/61780

J-Focus动画应用框架使用教程相关推荐

  1. Android Framework 窗口子系统 （08）窗口动画之动画系统框架

    该系列文章总纲链接:专题分纲目录 Android Framework 窗口子系统 本章关键点总结 & 说明: 导图是不断迭代的,这里主要关注➕ 左上角 Android 窗口动画系统部分(因为导 ...

  2. 腾讯Web前端JX框架入门教程(一)

    什么是JX框架 JX框架(Javascript eXtension tools)是模块化的非侵入式Web前端框架,适用于Web Page和Web App项目的开发,特别适合构建和组织大规模.工业级的W ...

  3. 最新最全的 layUI 框架使用教程视频教程分享

    最新最全的 layUI 框架使用教程视频教程分享! 教程截图如下: 本系列课程为大家介绍的是一款优秀国产UI框架layUI,该框架是一款采用自身模块规范编写的情怀级前端UI框架,遵循原生HTML/CS ...

  4. 王者级微信小程序开发实战教学 从零到高手搭建微信小程序框架开发教程

    王者级微信小程序开发实战教学 从零到高手搭建微信小程序框架开发教程 小程序进阶 王者级微信小程序开发实战教学课程,讲师手把手对同学们进行微信小程序开发的进阶实战,从零开始搭建,从本地到云端开始系统化的 ...

  5. Blender3.0动画制作入门学习教程 Learn Animation with Blender (2021)

    要求 下载并安装Blender.免费下载和免费用于任何目的. 描述 加入我的动画课程. 在本课程中,我将从头开始讲述在Blender中创建动画场景的过程. 从第一步到最终渲染.在这个课程中,我们将使用 ...

  6. 动画产业基础学习教程 Rad How to Class – Animation Industry Fundamentals

    如何分类--动画产业基础 大小解压后:6.2G 含课程素材 1920X1080 mp4 语言:英语+中英文字幕(根据原英文字幕机译更准确) 信息: 绘画技巧.解剖学.角色设计.透视和整体讲故事--这门 ...

  7. c++框架有哪些_Java Mybatis框架入门教程_v20200726

    MyBatis 的前身是 Apache 的开源项目 iBatis.MyBatis 几乎可以代替 JDBC,是一个支持普通 SQL 查询,存储过程和高级映射的基于 Java 的优秀持久层框架.MyBat ...

  8. 尚硅谷SpringCloud(H版alibaba)框架开发教程(大牛讲授spring cloud) 最详细的。

    尚硅谷SpringCloud(H版&alibaba)框架开发教程(大牛讲授spring cloud) 一. 从2.2.x和H版开始说起 二.关于Cloud各种组件的停更/升级/替换 三.微服务 ...

  9. PHP: 手把手编写自己的 MVC 框架实例教程

    1 什么是MVC MVC模式(Model-View-Controller)是软件工程中的一种软件架构模式,把软件系统分为三个基本部分:模型(Model).视图(View)和控制器(Controller ...

最新文章

  1. R语言使用coin包应用于分类变量独立性问题的置换检验(permutation tests)、使用普通卡方检验chisq.test函数和置换近似卡方检验chisq.test函数、检验分类变量的独立性
  2. 在Vmware中安装Hyper-V
  3. 计算机期末考试操作题简单,计算机期末考试操作题及答案计算机期末考试操作题及答案.doc...
  4. 子网划分详解与子网划分实例
  5. Highcharts图表-ajax-获取json数据生成图表
  6. 线段树-楼房重建-洛谷-P4198
  7. 运营推广人员黑话，小心躺枪！
  8. 超大背包问题(二进制枚举 + 二分)
  9. Ubuntu系统下载（清华大学开源软件镜像站）（ubuntu-20.04.1-desktop-amd64.iso）
  10. 正则表达式详解及示例
  11. 自动批量多渠道打包（腾讯VasDolly、美团walle），分渠道更新
  12. 弧形背景html,弧形背景墙—弧形背景墙相关知识介绍
  13. 03-Mono Flux操作
  14. Verilog训练笔记（2）——数据降速增宽
  15. 【PLC通信原理探秘】大讲堂幕后彩蛋之搁浅
  16. 基于STM32的超声波雷达项目【可拟合构建平面地图】（代码开源）
  17. 【Flutter实战 BLoC模式 RxDart Provider模式】
  18. PFM格式图像和读取middlebury 数据集
  19. OpenCV计算机视觉编程篇三《处理图像的颜色》
  20. Prometheus 动态拉取监控服务

热门文章

  1. 4j导入节点与关系_Neo4j Cypher 中怎样根据值动态指定关系类型？
  2. 微型计算机2020年6月上,2020年1-6月全国微型计算机设备产量统计分析
  3. matlab动力学方程,机器人动力学方程（二）：拉格朗日法
  4. python表达匹配_python 中文正则表达匹配
  5. CSS 定位 (Positioning)
  6. html页面在微信分享php,详解html静态页面实现微信分享思路的示例代码分析
  7. mysql 5.7 1055_mysql 5.7报1055错误的解决方法
  8. 三天学会Selenium，阿里p7精心整理自动化测试Selenium大礼包
  9. sql中还在傻傻的手动添加创建人、创建时间？高级开发工程师不得不知的一个通用技巧！
  10. 更新pcb封装导入_PCB中3D应用相关功能详解