Ⅰ 前端基本功：js（十一）動畫封裝(CSS樣式獲取、JSON遍歷)
盒子 原來的位置 0 + 10 盒子現在的offsetLeft 10
|-5| = 5
這三個函數都是 數學函數
Math
比如說 console.log(Math.ceil(1.01)) 結果 是 2
console.log(Math.ceil(1.9)) 結果 2
console.log(Math.ceil(-1.3)) 結果 是 -1
比如說 console.log(Math.floor(1.01)) 結果 是 1
console.log(Math.floor(1.9)) 結果 1
console.log(Math.floor(-1.3)) 結果 是 -2
console.log(Math.round(1.01)) 結果 是 1
console.log(Math.round(1.9)) 結果 是 2
勻速動畫的原理： 盒子本身的位置 + 步長
緩動動畫的原理: 盒子本身的位置 + 步長 (不斷變化的)
( 缺陷：只能水平方向！隨後的「封裝運動框架單個屬性會進一步改進」 )
我們訪問得到css 屬性，比較常用的有兩種：
點語法可以得到 width 屬性 和 top屬性 ** 帶有單位的 。 100px
但是這個語法有非常大的 缺陷**， 不變的。
後面的width 和 top 沒有辦法傳遞參數的。
var w = width;
box.style.w
最大的優點 ： 可以給屬性傳遞參數
我們想要獲得css 的樣式， box.style.left 和 box.style.backgorundColor
但是它只能得到 行內的樣式。
但是我們工作最多用的是 內嵌式 或者 外鏈式 。
怎麼辦？
核心： 我們怎麼才能得到內嵌或者外鏈的樣式呢？
外部（使用<link>）和內嵌（使用<style>）樣式表中的樣式（ie和opera）
兩個選項是必須的， 沒有偽類 用 null 替代
我們這個元素裡面的屬性很多， left top width ===
我們想要某個屬性， 就應該 返回該屬性，所有繼續封裝 返回當前樣式的 函數。
千萬要記得 每個 的意思 ： 那是相當重要
flag在js中一般作為開關，進行判斷。
等動畫執行完畢再去執行的函數 回調函數
我們怎麼知道動畫就執行完畢了呢？
很簡單 當定時器停止了。 動畫就結束了
案例源碼：
in運算符也是一個二元運算符，但是對運算符左右兩個操作數的要求比較嚴格。in運算符要求第1個（左邊的）操作數必須是字元串類型或可以轉換為字元串類型的其他類型，而第2個（右邊的）操作數必須是數組或對象。只有第1個操作數的值是第2個操作數的屬性名，才會返回true，否則返回false
案例源碼：
鏈接： http://pan..com/s/1miEvqoo
Ⅱ Spine導出的三個文件中動畫文件.json文件如何轉成.skel文件
ui的話uilayer*
ul=uilayer::create();
addchild(ul);
uilayout*
widget=dynamic_cast
(guireader::sharereader()->widgetfromjsonfile("json路徑跡閉"));
ul->addwidget(widget);
骨骼動畫的話我是這樣用的攔胡
用到的都是export這個文件夾下的東西
ccarmaturedatamanager::sharedarmaturedatamanager()->addarmaturefileinfo("export文件夾下的exportjson文件");
ccarmature*
armature=ccarmature::create("cocostudio的文件名字");
就用姿衡裂過這兩個，希望對你有幫助。。
Ⅲ 請問ae怎麼導json文件
在Adobe After Effects中，您可以使用Bodymovin插件來將動畫導出為JSON文件，也可以使用LottieFiles插件來導入JSON文件。
以下是使用LottieFiles插件導入JSON文件的步驟：
首先，您需要從LottieFiles網站下載並安裝LottieFiles插件。
打開After Effects，並帆薯從菜單欄選擇「Window」>「Extensions」>「LottieFiles」。
在LottieFiles面板中，單擊「Browse」按鈕，選擇要導敗橘入的JSON文件。
確定您要導入的JSON文件的設置，例如渲染選項和大小。
單擊「Import」按鈕，將JSON文件導入到After Effects項目中。
請注意，導入JSON文件時，After Effects會自動創建一個合成，並將JSON文件中的圖層轉換為合成中的矢量形狀圖層。您可以使用After Effects中察轎團的其他工具和效果來編輯和調整這些圖層。
希望這些步驟可以幫助您導入JSON文件到After Effects中。
Ⅳ starst動畫倒出json沒顯示為什麼
樓主是用animation編輯器導出的吧？
試試這樣寫：
ccs.ArmatureDataManager:getInstance():addArmatureFileInfo("MoveAnimation_1/MoveAnimation_1.ExportJson")
local armature = ccs.Armature:create("Animation0")
armature:getAnimation():playWithIndex(0)
Ⅳ cocos2d-x 3.2 lua 怎麼導入cocostudio動畫
Cocostudio目前的功能包括UI編輯器、動畫編輯器、場景編輯器和數據編輯器。數據編輯器沒有涉及到，就不說了。剩下三者中主要講下導入UI編輯器的資源。
UI編輯器導出的文件包括一個.ExportJson文件，一個.plist文件和一個.png文件。Cocostudio中文官網中說的是TouchGroup，英文官網中是UILayer，可是都已經不存在了。UILayer變成了Layer，現在也可以不創建Layer，直接加到場景上面。所以代碼可以這樣：
Node *pNode = GUIReader::getInstance()->widgetFromJsonFile("test.ExportJson");
this->addChild(pNode);
下面就可以用getChildByTag來獲取組件了。不過getChildByTag貌似只能按照樹的結構一層層照下來，顯得很麻煩，而且不能按照名字來取。所以，現在可以用ui中的Helper直接從樹中獲取組件，用name或者tag。但seekWidgetByTag和seekWidgetByName的第一個參數是Widget類型，需要將pNode轉成Widget類型。（從.ExportJson文件可以看出來，pNode本來就是一個Widget類型的樹）
Button *button = (Button*)(ui::Helper::seekWidgetByName(pNode, "button"));
順便附上綁定事件監聽的代碼，使看到的人免去尋找之苦。
button->addTouchEventListener(CC_CALLBACK_2(MainScene::touchEvent, this));
touchEvent是自己寫的方法。這個方法大致是如下用法，注意pSender和type的使用。
void SingleMenuScene::selectEvent(Ref *pSender, Widget::TouchEventType type)
{
switch(type)
{
case Widget::TouchEventType::ENDED:
GameSetting::Map map = GameSetting::Map::DEFAULT;
if(pSender == defaultBtn)
{
map = GameSetting::Map::DEFAULT;
}
else if(pSender == snowBtn)
{
map = GameSetting::Map::SNOW;
}
Scene *game = BattleScene::createScene(map);
TransitionScene *transition = TransitionFade::create(0.5, game);
Director::getInstance()->replaceScene(transition);
}
}
導入動畫編輯器的動畫的代碼如下：
CCArmatureDataManager::sharedArmatureDataManager()->addArmatureFileInfo("Animation0.png","Animation0.plist","Animation.ExportJson");
CCArmature *armature = CCArmature::create("Animation");
armature->getAnimation()->playByIndex(0);
armature->setScale(0.5f);
armature->setPosition(ccp(visibleSize.width * 0.5, visibleSize.height * 0.5));
this->addChild(armature);
導入場景編輯器的場景的代碼如下：
Node* pNode = SceneReader::getInstance()->createNodeWithSceneFile("scene.ExportJson");
this->addChild(pNode);
這個讀出的Node貌似不能轉成Widget，因為它不僅包括UI組件還有動畫等資源。獲取組件和綁定事件監聽可以這樣寫：
ComRender *render = (ComRender*)(pNode->getChildByTag(10010)->getComponent("GUIComponent"));
Widget *widget = (Widget*)(render->getNode());
widget->addTouchEventListener(CC_CALLBACK_2(MainScene::touchEvent, this));
Ⅵ creator 可以用studio導出的.ExportJson動畫文件嗎
無法直接用。你可以用studio 2 creator轉化插件，直接把studio工程轉到creator裡面。
Creator相關問題，請移步 f s.com提問 無法直接用。你可以用studio 2 creator轉化滲空插件，直接叢穗瞎把studio工程轉到creator裡面。
Creator相關問題族漏，請移步 f s.com提問
Ⅶ 如何使用 Cocos Studio 場景編輯器製作《魔卡幻想》主界面
內容列表
1 cocostudio 場景編輯器
2 使用 cocostudio 完成《魔卡幻想》場景編輯
2.1 UI 編輯器製作游戲主界面
2.2 建立關鍵幀動畫
2.3 場景編輯器的 資源「整合」
3 在 cocos2d-x 中載入場景資源 並運行之
3.1 載入場景內容
3.2 在場景中播放動畫
3.3 對場景的一些編碼說明
1.cocostudio 場景編輯器
前面的文章 《使用 cocostudio 創建 cocos2d-x 序列幀和骨骼動畫》《如何使用 cocostudio UI 編輯器實現《亂斗堂》設置界面》，其中介紹了如何使用動畫編輯器創建動畫與使用 UI 編輯器創建游戲配置界面，而本文將集兩者之大成，使用 cocostudio 場景編輯器來創建游戲場景，其中包含游戲 UI 與動畫，來定製一個游戲主界面。
2.使用 cocostudio 完成《魔卡幻想》場景編輯
對於環境的搭建使用，請參考之前的文章，或者實時關注 官方 最新版本的安裝使用方法。
2.1 UI 編輯器搏侍製作游戲主界面
a.創建項目(項目名稱：MysticalCard)，並導入項目 UI 資源，添加 一圖片框設定背景圖片。注意在工具攔設置 「畫布」 的大小（如果需要），這將決定著你的設計解析度，在運行時還需要注意屏幕的適配問題，如放大縮小，位置偏移等，視具體情況而定。
b.為界面添加 UI 元素，圖片框等，請根據自己的需要定製.
c.實踐過程中的注意事項
添加控制項時注意必要的屬性設置
控制項的命名規范，這有助於我們今後在後台編寫代碼獲取界面元素
可交互的控制項的 「可交互屬性」 開啟
2.2 建立關鍵幀動畫
除了主界面一些必要的 UI 控制項，我們還需要一個 「對話框指示」 的動畫效果。這是一個幀動畫。
a.准備工作。
打開 CocoStudio ,啟動 動畫編輯器
創建一個新的項目，後導入資源（在 「資源窗口」 中，點擊 「文件」 或者 「文件夾」 標示，添加需要的素材資源）
在 「資源窗口中」 點擊關鍵幀動畫的守幀圖片，拖動至 「渲染窗口」
如下圖所示：
b.將第一關鍵幀拖動至 「渲染窗口」 中心。 可以使用工具欄，快速定位至窗口中心，使圖片顯示在正中間，可以讓動畫更好的定位。
c.添加其它幀圖片，注意，我們需要選中剩餘圖片，然後 「拖動」 到 「對象結構」 視圖中的 「第一關鍵幀」 所在的對象，如下圖所示。
關鍵幀 與 骨骼動畫操作區別：在使用骨骼動畫的時候，我兄銀培們將骨骼中的各部分元素，直接拖動添加到 「渲染窗口」，以擺放各骨骼的位置關系，而在 「對象結構」 視圖中則表現為，一個列表，標示著每一e.塊骨骼對象，不同幀所改變的是各個骨骼對象的位置，以達到骨骼動畫效果。
而在關鍵幀動畫中，它的對象結構只有一個，而在每一幀修改的不是其位置，而是其顯示內容。這是羨唯兩者之間的區別，那操作方式也有所不同。而對於它們所導出的 資源 則是相同，用法也是同樣。
d.剩餘幀添加之後，我們看見在 「關鍵幀」 視圖中，已經有了多幀動畫，可以播放動畫，查看效果，並可以通過修改 「速率」 來控制動畫的播放速度。
導出動畫資源，導出的資源文件可以被我們在 Cocos2d-x 中以代碼的方式直接載入，然後播放其動畫，也可以作為 場景編輯器中的一個元素，被添加在場景編輯器里，後面的內容就是使用 場景編輯器來載入一個動畫的方式。
2.3 場景編輯器的 資源「整合」
使用 CocoStudio 可以很好的幫助游戲開發過程中 分工合作。動畫編輯器 和 UI 編輯器可以由多個人進行編輯，最後再由一個人統合資源，這也就是場景編輯器的優點了，它除了能支持 CocoStudio 本身所自帶的動畫編輯器，UI 編輯器，它還能支持，Tmx 地圖資源，粒子編輯器的粒子效果資源，聲音資源等～並且不斷擴展中。
以下將給出如何在 場景編輯器整合我們之前所創建的動畫與 UI 界面的資源，來實現我們一個場景的運行效果。它的步驟如下：
a.啟動場景編輯器，新建一個場景項目。並設置 「畫布」 大小。畫布大小要適量。
b.我們拖動一個 UI 控制項到畫布之上，它作為我們之前導出的 UI 資源的承載。
c.我們將之前的 UI 編輯器所導出的資源，導入到當前場景項目中來，導入方式與 UI 編輯器導入資源方式同樣，如下圖：.
d.為 UI 控制項的 「文件」 屬性賦值：我們在資源視圖中找到 UI 編輯器所導出的 UI 資源，其目錄下包含 json 文件資源（如這里的 「MysticalCard_1.json」）,將其拖動到 UI 控制項的文件 屬性中去，如下圖所示：
e.前面的步驟已經將 UI 資源導入場景之內，現在需要添加之前所創建的動畫資源。
我們以相同的方式導入動畫編輯器所導出的動畫資源文件。
拖動一個骨骼控制項至場景界面，如下圖所示。
為骨骼控制項的 「文件」 屬性賦值，其值為 動畫資源中的 ExportJson（或者 json 文件，這取決於動畫資源的導出方式） 文件。
f.運行效果：當我們建立好場景之後，可以通過工具欄運行按鈕，點擊查看效果，這意味著你不用將所有的資源文件，手動以代碼的方式添加到 Cocos2d-x 中，便能看到效果。
在運行效果中，所有的控制項都是可操作的，如下圖，但這里只有點擊效果，如果需要實現其邏輯，那麼現在需要將其載入到 Cocos2d-x 項目中，編寫後台代碼實現。
3.在 Cocos2d-x 中載入場景資源 並運行之
3.1 載入場景內容
前面那麼多步驟，使用 CocoStudio 來創建了 UI，動畫，還有一個場景，而要將其運行在實際的項目中，就非常的簡單與方便了，只需幾行代碼，就能夠將其載入到項目中去，當然在這之前我們需要將場景編輯器的資源（場景項目目錄中 「Resources」 目錄，其中將包含一個 json 文件）復制到項目資源目錄中去：
// 載入場景資源
CCNode *pNode = CCJsonReader::sharedJsonReader()->createNodeWithJsonFile(「McScene.json」);
this->addChild(pNode);
通過 CCJsonReader 來讀取解析 json，從而獲得場景中的節點內容，直接添加到當前的場景就能運行。
3.2 在場景中播放動畫
默認載入的場景資源 動畫 組件是沒有播放的，需要手動獲取動畫組件對象，然後調用其播放方法，當然這個步驟也是非常簡單的：
// pNode 為 之前所獲取的場景資源根節點，通過此節點獲取到動畫對象，獲取方式根據在場景編輯其中設置的層次關系而定
CCComRender *pLoadRender = (CCComRender*)(pNode->getChildByTag(1)->getChildByTag(1)->getComponent(「CCArmature」));
CCArmature* armLoad = (CCArmature*)(pLoadRender->getRender());
armLoad->getAnimation()->playByIndex(0);
3.3 對場景的一些編碼說明
使用 CocoStudio 就是為了幫助我們快速的建立 UI 原型，然後通過編碼可以獲取到裡面的任意一個元素對象，並修改其屬性值，調用其方法，正如上面所示播放一個動畫的方法同樣。其步驟如下：
通過 CCJsonReader 類讀取 json 文件，將會自動解析構建對象，返回一個節點 CCNode
任何元素都能通過這個 CCNode 節點，獲取到，它其實就是一個樹，所不同的是層級關系（樹節點的位置）
找到需要對象所在的 「樹枝」，後通過 getComponent 方法獲取 所在的 CCComRender 對象
通過 CCComRender 的 getRender 方法獲取最終對象
得到我們所需要的具體對象之後，我們就能夠對齊進行草，設置屬性，調用方法等，諸如此類
轉載，僅供參考，祝你愉快，滿意請採納。
Ⅷ wpf載入.json動畫
1、安裝LottieSharp包
Install-Package LottieSharp -Version 1.1.3
image-20221124224712998
Tips：1.1.3需要簡悶宏攔冊.NETFramework4.6.1環境，1.1.3以上需要.NET6以上環境
2、准備Lottie動畫文件
image-20221124224736054
文末附Lottie下載網站，或自行尋求設計師幫助
3、XAML編寫
<lottie:LottieAnimationView
x:Name="PART_Lottie"
HorizontalAlignment="Center"
VerticalAlignment="Center"
AutoPlay="True"
FileName="{Binding CurrentFile}" />
4、播放罩扒動畫
在控制項上設置AutoPlay為True可自動播放，也可手動在後台代碼中使用PlayAnimation()播放，後台操作播放需要通過控制項去訪問方法。
Ⅸ cocos creator 怎麼加載入json動畫
：一、首先去下載JsonCpp這個吵譽賀庫。 解壓後，找到include的文件夾。將它們升派復制到2dx工程的libs目錄，然後加入到工程中。 你可以使用jsoncpp這個庫了，在使用的地方引用頭文件json.h就可以了。虛鬧
Ⅹ Bodymovin導出Json文件避坑指南
一、放入AE中的圖層最好是圖片格式，如果是AI或者PSD格式圖層，在mac系統會出現勾選了「賣扒保留圖片名稱」選項，但是無法輸出image文件夾，演示的html會出現圖片丟失
如若不勾選「保留圖片名稱」選項，插件導出的圖片資源會自動命名為img_0至img_N，而如果產品中之前有同樣的動效圖片素材，放入該動效後，資源會覆蓋。
所以，我們在AE文件中的圖層需要全英文命名，且如若是在mac系統上，AE中的圖層最好是圖片。如果是AI或是PSD格式，需要手動將圖層創建為形狀，但是創建形狀後圖層顏色丟失，需要重新設置顏色。
故mac系統上建議使用圖片作為圖層。
（經驗證，windows系統不存在這個問題，不管是AI圖層還是PSD圖層，勾選「保留圖片名稱」選項，導出.ai或是.PSD格式的資源，只要Json和素材能對應上，在開發實現上就沒有問題）。
二、小程序實現APP端的動效，同樣可使用Lottie庫，使用bodymovin插件導出Json格式，值得注意的地方：資源在插件輸出時要轉化成base64格式，否則無法在小程序引入圖片。
這樣輸出的文件會沒有了image文件夾，圖片資源一並存到了Json中，Json體積多大，動畫在小程序的體積就是多大。
一個小細節是：壓縮圖片選項不管設置高還是低，Json的體積不會有太大的變化，所以保持早禪默認80就OK。
三、Lottie庫AE特性支持要點：形狀、填充、基本屬性變換可支持，蒙版部分效果不支持，考慮到多平台兼容，動畫要求簡單，輸出陸配塵時簡化幀數
Lottie支持的AE特性列表官方文檔：https://airbnb.io/lottie/#/supported-features