Skip to content

Commit

Permalink
demo in one
Browse files Browse the repository at this point in the history
  • Loading branch information
yang qianjun committed Jun 11, 2015
0 parents commit 663fd6d
Show file tree
Hide file tree
Showing 310 changed files with 64,753 additions and 0 deletions.
8 changes: 8 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
** 需要服务器环境才能跑起来 & wamp 推荐【数据接口现在是用php做的】

1，打开页面看效果
2，对着文档看例子代码 & http://ued.qunar.com/oniui/mmRouter/avalon.mmRouter.doc.html#!/
3，动手，做任何修改使之适合你的业务
4，常见问题，请看 & https://github.com/RubyLouvre/mmRouter/issues/71
5，用r.js和并代码，略麻烦，如果未显式的require代码，则需要在合并过程将controller和template合并
6，commonjs规范的是基于fekit生成环境，在其他的commonjs开发工具下应该也可以运行
24 changes: 24 additions & 0 deletions amd/api/data.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<?php
$action = isset($_GET["action"]) ? $_GET["action"] : false;
$arr = array();
if($action == "list") {
$pageId = isset($_GET["pageId"]) ? intval($_GET["pageId"]) : 0;
$count = 0;
while($count < 10) {
array_push($arr, array(
"id" => $pageId * 10 + $count,
"title" => "拉森B冰架2020年将消失" . ($pageId * 10 + $count),
));
$count++;
}
} elseif ($action == "detail") {
$blogId = isset($_GET["blogId"]) ? intval($_GET["blogId"]) : 0;
$arr = array(
"title" => "精彩文章第" . $blogId . "篇",
"content" => "霸王龙，又名暴龙，属暴龙科中的一种，名字的意思是残暴的蜥蜴王。是史上最庞大的肉食性动物之一和最著名的食肉恐龙，它是恐龙中生存年代最晚的种类之一，体长12~14米，最长15米。平均臀部高度3.6米，最高4.1米。平均高度5.1米，最高6米（从地面至头部）。平均体重9吨，最重14.85吨，头部1·55米。咬合力居陆地生物和食肉恐龙第一（咬合力可达20吨），同时也是体型最为粗壮的食肉恐龙。",
"blogId" => $blogId,
);
}
header("Content-Type:application/json");
echo json_encode($arr);
?>
20 changes: 20 additions & 0 deletions amd/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<title>文章单页应用</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="style.css">
</head>
<body
ms-controller="root">
<div ms-view="" class="layout"></div>
<div ms-view="footer"></div>
</body>
<script src="script/avalon.js"></script>
<script>
require(["./route"], function(route) {
route && route.init && route.init()
})
</script>
</html>
224 changes: 224 additions & 0 deletions amd/script/animation/avalon.animation.doc.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,224 @@
<!DOCTYPE html>
<html>

<head>
<title>动画引擎</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="descriptions" content="基于单时间轴的动画引擎
使用方法
avalon(elem).animate(properties[, duration][, easing][, complete])
avalon(elem).animate(properties, options)
" />
<link type="text/css" rel="stylesheet" href="../style/avalon.doc.css"
/>
<script src="../highlight/shCore.js"></script>
</head>

<body>
<div class="wrapper">
<h2>mmAnimate</h2>
<fieldset>
<legend>动画引擎</legend>
<p>基于单时间轴的动画引擎</p>
<h3>使用方法</h3>
<pre class="brush:javascript;gutter:false;toolbar:false;"> avalon(elem).animate(properties[, duration][, easing][, complete])
avalon(elem).animate(properties, options)</pre>
</fieldset>
<fieldset>
<legend>使用说明</legend>
<table class="table-doc" border="1">
<colgroup>
<col width="180" />
<col width="80" />
<col width="120" />
</colgroup>
<tr>
<th>名字</th>
<th>类型</th>
<th>默认值</th>
<th>说明</th>
</tr>
</table>
</fieldset>
<div class="others">
<p>一个时间轴
<code>avalon.timeline</code>中包含许多帧, 一帧里面有各种渐变动画, 渐变的轨迹是由缓动公式所规定</p>
</div>
<div class="others">
<p>avalon.fn.delay, avalon.fn.slideDown, avalon.fn.slideUp, avalon.fn.slideToggle,
avalon.fn.fadeIn, avalon.fn.fadeOut,avalon.fn.fadeToggle avalon.fn.show,
avalon.fn.hide, avalon.fn.toggle这些方法其实都是avalon.fn.animate的 二次包装，包括
<code>avalon.fn.animate</code>在内，他们的功能都是往时间轴添加一个帧对象(Frame)</p>
<p>帧对象能在时间轴内存在一段时间，持续修改某一元素的N个样式或属性。</p>
<p>
<strong>Frame</strong>对象拥有以下方法与属性</p>
<table class="table-doc" border="1">
<colgroup>
<col width="180" />
<col width="80" />
<col width="120" />
</colgroup>
<tr>
<th>名字</th>
<th>类型</th>
<th>默认值</th>
<th>说明</th>
</tr>
<tr>
<td>elem</td>
<td>Element</td>
<td></td>
<td>处于动画状态的元素节点</td>
</tr>
<tr>
<td>$events</td>
<td>Object</td>
<td>{}</td>
<td>放置各种回调</td>
</tr>
<tr>
<td>troops</td>
<td>Array</td>
<td>[]</td>
<td>当queue为true，同一个元素产生的帧对象会放在这里</td>
</tr>
<tr>
<td>tweens</td>
<td>Array</td>
<td>[]</td>
<td>放置各种补间动画Tween</td>
</tr>
<tr>
<td>orig</td>
<td>Object</td>
<td>{}</td>
<td>保存动画之前的样式，用于在隐藏后还原</td>
</tr>
<tr>
<td>dataShow</td>
<td>Object</td>
<td>{}</td>
<td>保存元素在显示时的各种尺寸，用于在显示前还原</td>
</tr>
<tr>
<td>bind(type, fn, unshift)</td>
<td></td>
<td></td>
<td>
<table border="1">
<tbody>
<tr>
<th style="width:100px">参数名/返回值</th>
<th style="width:70px">类型</th>
<th>说明</th>
</tr>
<tr>
<td>type</td>
<td>String</td>
<td>事件名</td>
</tr>
<tr>
<td>fn</td>
<td>Function</td>
<td>回调，this为元素节点</td>
</tr>
<tr>
<td>unshift</td>
<td>Undefined|String</td>
<td>判定是插在最前还是最后</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>fire(type, [otherArgs..])</td>
<td></td>
<td></td>
<td>触发回调，可以传N多参数</td>
</tr>
</table>
</div>
<div class="others">
<p>渐变动画
<code>Tween</code>是我们实现各种特效的最小单位，它用于修改某一个属性值或样式值</p>
<p>
<strong>Tween</strong>对象拥有以下方法与属性</p>
<table class="table-doc" border="1">
<colgroup>
<col width="180" />
<col width="80" />
<col width="120" />
</colgroup>
<tr>
<th>名字</th>
<th>类型</th>
<th>默认值</th>
<th>说明</th>
</tr>
<tr>
<td>elem</td>
<td>Element</td>
<td></td>
<td>元素节点</td>
</tr>
<tr>
<td>prop</td>
<td>String</td>
<td>""</td>
<td>属性名或样式名，以驼峰风格存在</td>
</tr>
<tr>
<td>start</td>
<td>Number</td>
<td>0</td>
<td>渐变的开始值</td>
</tr>
<tr>
<td>end</td>
<td>Number</td>
<td>0</td>
<td>渐变的结束值</td>
</tr>
<tr>
<td>now</td>
<td>Number</td>
<td>0</td>
<td>当前值</td>
</tr>
<tr>
<td>run(per, end)</td>
<td></td>
<td></td>
<td>更新元素的某一样式或属性，内部调用</td>
</tr>
<tr>
<td>cur()</td>
<td></td>
<td></td>
<td>取得当前值</td>
</tr>
</table>
</div>
<ul class="example-links">
<li>
<a href="avalon.animation.ex.html"></a>
</li>
<li>
<a href="avalon.animation.ex1.html">算子 && fps 修改 with && backgroundColor</a>
</li>
<li>
<a href="avalon.animation.ex2.html">算子 && fps slideToggle, slideUp, slideDown</a>
</li>
<li>
<a href="avalon.animation.ex3.html">算子 && fps fadeToggle, fadeIn, fadeOut</a>
</li>
<li>
<a href="avalon.animation.ex4.html">算子 && fps toggle, show, hide</a>
</li>
</ul>
</div>
</body>

</html>
50 changes: 50 additions & 0 deletions amd/script/animation/avalon.animation.ex.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script>
window.onload = function() {
//chrome36 chrome39
// if (document.body.animate) {
var elem = document.querySelector("#test")
var player = elem.animate([
{transform: 'translate(0px, 0px)'},
{transform: 'translate(400px, 150px)'},
{transform: 'translate(0px, 300px)'}
], 1500);
console.log(player)
console.log(player.source)
player.onfinish = function(e) {
console.log('per aspera ad terra!');
}

// elem.animate([
// {backgroundColor: 'blue', offset: 0},
// {backgroundColor: 'green', offset: 1 / 3},
// {backgroundColor: 'red', offset: 2 / 3},
// {backgroundColor: 'yellow', offset: 1}
// ], 2000);
// }
}

</script>
<style>
#test{
width:100px;
height:100px;
background: red;
}
</style>
</head>
<body>
<div id="test">ccccc</div>
<template></template>
</body>
</html>
Loading

0 comments on commit 663fd6d

Please sign in to comment.