AvatarAnimationBlending.htm 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915
  1. <html xmlns:MSHelp="http://msdn.microsoft.com/mshelp" xmlns:msxsl="urn:schemas-microsoft-com:xslt" xmlns:xanx="http://schemas.microsoft.com/developer/xanx/2005"><head><META http-equiv="Content-Type" content="text/html; charset=utf-8"><META NAME="save" CONTENT="history"><title>Avatar Animation Blending Sample</title>
  2. <style><!--
  3. /***********************************************************
  4. * SCRIPT-SUPPORTING STYLES
  5. ***********************************************************/
  6. /* Defines the userData cache persistence mechanism. */
  7. .userDataStyle
  8. {
  9. behavior: url(#default#userData);
  10. }
  11. /* Used to save the scroll bar position when navigating away from a page. */
  12. div.saveHistory
  13. {
  14. behavior: url(#default#saveHistory);
  15. }
  16. /* Formats the expand/collapse images for all collapsible regions. */
  17. img.toggle
  18. {
  19. border: 0;
  20. margin-right: 5;
  21. }
  22. /* Formats the Language filter drop-down image. */
  23. img#languageFilterImage
  24. {
  25. border: 0;
  26. margin-left: 0;
  27. vertical-align: middle;
  28. }
  29. /* Formats the Members Options filter drop-down image. */
  30. img#membersOptionsFilterImage
  31. {
  32. border: 0;
  33. margin-left: 0;
  34. vertical-align: middle;
  35. }
  36. /* Formats the Collapse All/Expand All images. */
  37. img#toggleAllImage
  38. {
  39. margin-left: 0;
  40. vertical-align: middle;
  41. }
  42. /* Supports XLinks */
  43. MSHelp\:link
  44. {
  45. text-decoration: underline;
  46. color: #0000ff;
  47. hoverColor: #3366ff;
  48. filterString: ;
  49. }
  50. body
  51. {
  52. background: #FFFFFF;
  53. color: #000000;
  54. font-family: Verdana;
  55. font-size: medium;
  56. font-style: normal;
  57. font-weight: normal;
  58. margin-top: 0;
  59. margin-bottom: 0;
  60. margin-left: 0;
  61. margin-right: 0;
  62. width: 100%;
  63. /*font-size: 110%;*/
  64. }
  65. div.section
  66. {
  67. margin-left: 15px;
  68. }
  69. div.hxnx5
  70. {
  71. margin-left: 1.5em;
  72. }
  73. /* Font for all headings */
  74. h1, h2, h3, h4, h5, h6
  75. {
  76. font-family: Verdana, Arial, Helvetica, sans-serif;
  77. margin-top: 18;
  78. margin-bottom: 8;
  79. font-weight: bold;
  80. }
  81. h1
  82. {
  83. font-size: 130%;
  84. color: #003399;
  85. }
  86. div#scrollyes h1 /* Changes font size for full-scrolling topic */
  87. {
  88. font-size: 150%;
  89. }
  90. h2
  91. {
  92. font-size: 125%;
  93. }
  94. h3
  95. {
  96. font-size: 115%;
  97. margin-top: 9;
  98. margin-bottom: 4;
  99. }
  100. h4
  101. {
  102. font-size: 115%;
  103. margin-top: 9;
  104. margin-bottom: 4;
  105. }
  106. h5
  107. {
  108. font-size: 100%;
  109. margin-top: 9;
  110. margin-bottom: 4;
  111. }
  112. h6
  113. {
  114. font-size: 100%;
  115. margin-top: 9;
  116. margin-bottom: 4;
  117. }
  118. ul p, ol p, dl p
  119. {
  120. margin-left: 0em;
  121. }
  122. p
  123. {
  124. margin-top: .6em;
  125. margin-bottom: .6em;
  126. }
  127. td p
  128. {
  129. margin-top: 0.0em;
  130. margin-bottom: 0.6em;
  131. }
  132. dd p
  133. {
  134. margin-top: 0.0em;
  135. margin-bottom: 0.6em;
  136. }
  137. .image
  138. {
  139. text-align: center;
  140. }
  141. dl
  142. {
  143. margin-top: 0em;
  144. margin-bottom: 1.3em;
  145. }
  146. dd
  147. {
  148. margin-bottom: 0em;
  149. margin-left: 1.5em;
  150. }
  151. dl.glossary dd
  152. {
  153. margin-bottom: 0em;
  154. margin-left: 1.5em;
  155. }
  156. dt
  157. {
  158. margin-top: .6em;
  159. margin-bottom: 1;
  160. }
  161. ul, ol
  162. {
  163. margin-top: 0.6em;
  164. margin-bottom: 0.6em;
  165. }
  166. ol
  167. {
  168. margin-left: 2.5em;
  169. }
  170. ul
  171. {
  172. list-style-type: disc;
  173. margin-left: 1.9em;
  174. }
  175. li
  176. {
  177. margin-bottom: 0.4em;
  178. }
  179. ul ol, ol ol
  180. {
  181. list-style-type: lower-alpha;
  182. }
  183. pre
  184. {
  185. margin-top: .6em;
  186. margin-bottom: .6em;
  187. }
  188. pre
  189. {
  190. font: 105% Lucida, mono;
  191. color: #000066;
  192. }
  193. code
  194. {
  195. font-family: Monospace, Courier New, Courier;
  196. font-size: 105%;
  197. color: #000066;
  198. }
  199. table.userdata td
  200. {
  201. background: #ffffff;
  202. background-color: #F5F5F5;
  203. border-color: #ffffff;
  204. border: none;
  205. }
  206. table.clsWarning
  207. {
  208. background: #ffffff;
  209. padding: 0px;
  210. margin: 0px;
  211. border: none;
  212. }
  213. table.clsWarning td
  214. {
  215. padding: 0px;
  216. margin: 0px;
  217. background: #ffffff;
  218. vertical-align: middle;
  219. font-size: 70%;
  220. }
  221. div#mainSection table
  222. {
  223. width: 98%;
  224. background: #ffffff;
  225. margin-top: 5px;
  226. margin-bottom: 5px;
  227. }
  228. div#mainSection table th
  229. {
  230. padding: 5px 6px;
  231. background: #EFEFF7;
  232. text-align: left;
  233. font-size: 70%;
  234. vertical-align: bottom;
  235. border-bottom: 1px solid #C8CDDE;
  236. }
  237. div#mainSection table td
  238. {
  239. padding: 5px 5px;
  240. background: #F7F7FF;
  241. vertical-align: top;
  242. font-size: 70%;
  243. border-bottom: 1px solid #D5D5D3;
  244. }
  245. div#syntaxCodeBlocks table th
  246. {
  247. padding: 1px 6px;
  248. color: #000066;
  249. }
  250. div#syntaxCodeBlocks table td
  251. {
  252. padding: 1px 5px;
  253. }
  254. /* Applies to the running header text in the first row of the upper table in the
  255. non-scrolling header region. */
  256. span#runningHeaderText
  257. {
  258. color: #003399;
  259. font-size: 90%;
  260. padding-left: 13;
  261. }
  262. /* Applies to the topic title in the second row of the upper table in the
  263. non-scrolling header region. */
  264. span#nsrTitle
  265. {
  266. color: #003399;
  267. font-size: 120%;
  268. font-weight: 600;
  269. padding-left: 13;
  270. }
  271. /* Applies to everything below the non-scrolling header region. */
  272. div#mainSection
  273. {
  274. font-size: 70%;
  275. width: 100%;
  276. }
  277. /* Applies to everything below the non-scrolling header region, minus the footer. */
  278. div#mainBody
  279. {
  280. font-size: 90%;
  281. margin-left: 15;
  282. margin-top: 10;
  283. padding-bottom: 20;
  284. }
  285. /* Adds right padding for all blocks in mainBody */
  286. div#mainBody p, div#mainBody ol, div#mainBody ul, div#mainBody dl
  287. {
  288. padding-right: 5;
  289. }
  290. div#mainBody div.alert, div#mainBody div.code, div#mainBody div.tableSection
  291. {
  292. width:98.9%;
  293. }
  294. div.alert p, div.code p
  295. {
  296. margin-top:5;
  297. margin-bottom:8;
  298. }
  299. /*- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Begin Note Styles - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/
  300. div#mainSection div.alert table
  301. {
  302. border: 0;
  303. }
  304. div#mainSection div.alert table th
  305. {
  306. padding-top: 0;
  307. padding-bottom: 0;
  308. padding-left: 5;
  309. padding-right: 5;
  310. }
  311. div#mainSection div.alert table td
  312. {
  313. padding-left: 5;
  314. padding-right: 5;
  315. }
  316. img.note
  317. {
  318. border: 0;
  319. margin-left: 0;
  320. margin-right: 3;
  321. }
  322. /*- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - End Note Styles - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/
  323. /*- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Begin Non-scrolling Header Region Styles - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/
  324. /* Applies to the entire non-scrolling header region. */
  325. div#header
  326. {
  327. background-color: #D4DFFF;
  328. padding-top: 0;
  329. padding-bottom: 0;
  330. padding-left: 0;
  331. padding-right: 0;
  332. width: 100%;
  333. }
  334. /* Applies to both tables in the non-scrolling header region. */
  335. div#header table
  336. {
  337. margin-top: 0;
  338. margin-bottom: 0;
  339. border-bottom-color: #C8CDDE;
  340. border-bottom-style: solid;
  341. border-bottom-width: 1;
  342. background: #D4DFFF;
  343. width: 100%;
  344. }
  345. /* Applies to cells in both tables in the non-scrolling header region. */
  346. div#header table td
  347. {
  348. color: #0000FF;
  349. font-size: 70%;
  350. padding-right: 20;
  351. padding-top: 1;
  352. padding-bottom: 1;
  353. border: none;
  354. background: #D4DFFF;
  355. }
  356. /* Applies to the last row in the upper table of the non-scrolling header region. Text
  357. in this row includes See Also, Constructors, Methods, and Properties. */
  358. div#header table tr#headerTableRow3 td
  359. {
  360. padding-bottom: 2;
  361. padding-top: 5;
  362. padding-left: 15;
  363. }
  364. /* Applies to the lower table in the non-scrolling header region. Text in this table
  365. includes Collapse All/Expand All, Language Filter, and Members Options. */
  366. div#header table#bottomTable
  367. {
  368. border-top-color: #FFFFFF;
  369. border-top-style: solid;
  370. border-top-width: 1;
  371. text-align: left;
  372. padding-left: 15;
  373. }
  374. blockquote
  375. {
  376. margin-left: 3.8em;
  377. margin-right: 3.8em;
  378. margin-top: .6em;
  379. margin-bottom: .6em;
  380. }
  381. sup
  382. {
  383. text-decoration: none;
  384. font-size: smaller;
  385. }
  386. a:link
  387. {
  388. color: #0000FF;
  389. /* font-weight: bold */
  390. }
  391. a:visited
  392. {
  393. color: #0000AA;
  394. /* font-weight: bold */
  395. }
  396. a:hover
  397. {
  398. color: #3366FF;
  399. /* font-weight: bold */
  400. }
  401. .label
  402. {
  403. font-weight: bold;
  404. margin-top: 1em;
  405. margin-left: -26px;
  406. }
  407. .tl
  408. {
  409. margin-bottom: .75em;
  410. }
  411. .atl
  412. {
  413. padding-left: 1.5em;
  414. padding-bottom: .75em;
  415. }
  416. .cfe
  417. {
  418. font-weight: bold;
  419. }
  420. .mini
  421. {
  422. font-size: smaller;
  423. }
  424. .dt
  425. {
  426. margin-bottom: -.6em;
  427. }
  428. .indent
  429. {
  430. margin-left: 1.9em;
  431. margin-right: 1.9em;
  432. }
  433. .product
  434. {
  435. text-align: right;
  436. color: #333333;
  437. font-size: smaller;
  438. font-style: italic;
  439. }
  440. .buttonbarshade
  441. {
  442. position: relative;
  443. margin: 0;
  444. left: 0px;
  445. top: 2;
  446. width: 50%;
  447. height: 40px;
  448. }
  449. .buttonbartable
  450. {
  451. position: absolute;
  452. margin: 0;
  453. padding:0;
  454. border:0;
  455. left:0px;
  456. top: 2;
  457. width: 100%;
  458. height: 40px;
  459. }
  460. /* background color, font for header */
  461. table.buttonbartable td, table.buttonbarshade td
  462. {
  463. background: #ffffff; /*#5177B8; #80C615;*/
  464. border-left: 0px solid #80C615;
  465. margin: 0;
  466. padding: 0px 0px 0px 0px;
  467. font-family: Impact, sans-serif;
  468. font-size: 14pt;
  469. }
  470. table.buttonbartable td.button1
  471. {
  472. background: #5177B8; /*#80C615;*/;
  473. padding: 0;
  474. font-weight: bold;
  475. text-align: center;
  476. cursor: hand;
  477. }
  478. table.buttonbartable td.button2
  479. {
  480. background: #5177B8; /*#80C615;*/;
  481. font-weight: bold;
  482. text-align: center;
  483. }
  484. table.buttonbartable td.button3
  485. {
  486. background: #5177B8; /*#80C615;*/;
  487. font-weight: bold;
  488. text-align: center;
  489. }
  490. table.buttonbartable td.runninghead
  491. {
  492. padding-left: 0px;
  493. font-style: italic;
  494. text-align: left;
  495. }
  496. .version
  497. {
  498. text-align: left;
  499. color: #000000;
  500. margin-top: 3em;
  501. margin-left: -26px;
  502. font-size: smaller;
  503. font-style: italic;
  504. }
  505. .lang, .ilang
  506. {
  507. color: #0000ff;
  508. font: normal 7pt Arial, Helvetica, sans-serif;
  509. }
  510. div.langMenu
  511. {
  512. position: absolute;
  513. z-index: 1;
  514. width: 96pt;
  515. padding: 8pt;
  516. visibility: hidden;
  517. border: 1px solid #000000;
  518. background: #ffffd0;
  519. }
  520. div.langMenu ul
  521. {
  522. padding-left: 2em;
  523. margin-left: 0;
  524. }
  525. div.filtered
  526. {
  527. margin: 4pt 0 8pt -26px;
  528. padding: 4px 4px 8px 26px;
  529. width: 100%;
  530. border: 2px solid #aaaacc;
  531. background: #ffffff;
  532. }
  533. div.filtered2
  534. {
  535. margin: 4pt 0 8pt -26px;
  536. padding: 4px 4px 8px 26px;
  537. width: 100%;
  538. border: none;
  539. background: #ffffff;
  540. }
  541. div.filtered h1, div.filtered h2, div.filtered h3, div.filtered h4
  542. {
  543. margin-left: -22px;
  544. }
  545. div.filtered span.lang
  546. {
  547. position: relative;
  548. left: -22px;
  549. }
  550. div.reftip
  551. {
  552. position: absolute;
  553. z-index: 1;
  554. padding: 8pt;
  555. visibility: hidden;
  556. border: 1px solid #000000;
  557. background: #ffffd0;
  558. }
  559. a.synParam
  560. {
  561. color: #0000FF;
  562. /*color: #3F7800;*/
  563. /*color: #8DC54F;*/
  564. text-decoration: none;
  565. font-weight: normal;
  566. }
  567. a.synParam:hover
  568. {
  569. text-decoration: underline;
  570. font-weight: normal;
  571. }
  572. div.sapop
  573. {
  574. position: absolute;
  575. z-index: 1;
  576. left: 26px;
  577. width: 100%;
  578. padding: 10px 10px 10px 36px;
  579. visibility: hidden;
  580. border: 1px solid #000000;
  581. background: #ffffd0;
  582. }
  583. div.footer
  584. {
  585. width: 100%;
  586. border: none;
  587. background: #ffffff;
  588. margin-top: 18pt;
  589. padding-bottom: 12pt;
  590. color: #0000FF;
  591. /*color: #228B22; */
  592. text-align: center;
  593. font-size: 76%;
  594. }
  595. div.preliminary
  596. {
  597. margin-top: 8pt;
  598. padding-bottom: 12pt;
  599. color: #A0A0A0;
  600. }
  601. /* A procedure section. eg. 'To create a file', 'To add a value' */
  602. div.proc
  603. {
  604. margin-left: 0.5em;
  605. }
  606. /* The title of a 'procedure' section. */
  607. div.proc h3
  608. {
  609. font-family: Verdana, Arial, Helvetica, sans-serif;
  610. font-weight: bold;
  611. font-size: 115%;
  612. margin-top: 1em;
  613. margin-bottom: 0.4em;
  614. margin-left: -0.5em;
  615. color: #003399;
  616. }
  617. div.proc ul
  618. {
  619. margin-left: 1.5em;
  620. }
  621. div.proc ol
  622. {
  623. margin-left: 2.0em;
  624. }
  625. .note
  626. {
  627. margin-left: 14pt;
  628. margin-right: 12pt;
  629. }
  630. .indent1
  631. {
  632. margin-left: 12pt;
  633. }
  634. .indent2
  635. {
  636. margin-left: 24pt;
  637. }
  638. .indent3
  639. {
  640. margin-left: 36pt;
  641. }
  642. p.proch
  643. {
  644. padding-left: 16px;
  645. }
  646. p.proch img
  647. {
  648. position: relative;
  649. vertical-align: top;
  650. left: -18px;
  651. margin-right: -14px;
  652. margin-bottom: -18px;
  653. }
  654. div.clsPlatSpec
  655. {
  656. background-color:#FFF8DC;
  657. border-style:solid;
  658. border-width:1pt 0pt 0pt 1pt;
  659. border-color:#ffE4C4;
  660. margin-top:0.6em;
  661. width:100%;
  662. }
  663. /* Applies to the language labels in the Language Filter drop-down list. */
  664. .languageFilter
  665. {
  666. color: #0000FF;
  667. cursor:hand;
  668. text-decoration:underline;
  669. padding-bottom:4;
  670. }
  671. /* Dropdown areas */
  672. #languageSpan {
  673. position: absolute;
  674. visibility: hidden;
  675. border-style: solid;
  676. border-width: 1px;
  677. border-color: #C8CDDE;
  678. background: #d4dfff;
  679. padding: 4px;
  680. font-size: 70%;
  681. }
  682. #membersOptionsSpan {
  683. position: absolute;
  684. visibility: hidden;
  685. border-style: solid;
  686. border-width: 1px;
  687. border-color: #C8CDDE;
  688. background: #d4dfff;
  689. padding: 4px;
  690. font-size: 70%;
  691. }
  692. --></style>
  693. <xml>
  694. <MSHelp:TOCTitle Title="Avatar Animation Blending Sample" />
  695. <MSHelp:RLTitle Title="Avatar Animation Blending Sample" />
  696. <MSHelp:Keyword Index="A" Term="O:Microsoft.Xna.AvatarAnimationBlending" />
  697. <MSHelp:Keyword Index="A" Term="8d7f56d7-204d-0fb6-4805-7a92d348a519" />
  698. <MSHelp:Keyword Index="K" Term="Avatar Animation Blending Sample" />
  699. <MSHelp:Attr Name="AssetID" Value="8d7f56d7-204d-0fb6-4805-7a92d348a519" />
  700. <MSHelp:Attr Name="Locale" Value="en-us" />
  701. <MSHelp:Attr Name="CommunityContent" Value="1" />
  702. <MSHelp:Attr Name="TopicType" Value="kbOrient" />
  703. <MSHelp:Attr Name="DocSet" Value="XNA" />
  704. <MSHelp:Attr Name="DocSet" Value="ExpressLibVS" />
  705. <MSHelp:Attr Name="DocSet" Value="C#" />
  706. <MSHelp:Attr Name="ProjType" Value="LocalProj" />
  707. <MSHelp:Attr Name="ProjType" Value="XNA_31" />
  708. <MSHelp:Attr Name="ProjType" Value="XNA_30" />
  709. <MSHelp:Attr Name="Technology" Value="XNA" />
  710. </xml>
  711. </head><body><div id="mainSection"><div id="mainBody">
  712. <h1>Avatar Animation Blending Sample</h1>
  713. This sample shows how to blend two avatar animations together so that they smoothly transition from one animation to the next.
  714. <a name="ID4EK"></a><h1 class="heading">Sample Overview</h1><div id="ID4EK" class="hxnx1">
  715. <p>
  716. The <b>AvatarAnimation</b> object gives developers the ability to play one of the built-in animations on an <b>AvatarRenderer</b>. When you switch animations, the positions of the avatars arms and legs can quickly snap to the new animation positions. Blending between the two animations can smooth out this transition.
  717. </p>
  718. <p>
  719. This sample demonstrates how to blend between two animations over a fixed period of time. Once a new animation is selected by the user, the new target animation is blended into the current animation over the period of a quarter of a second.
  720. </p>
  721. <a name="ID4EX"></a><h2 class="subHeading">Sample Controls</h2><div id="ID4EX" class="hxnx2">
  722. <p>This sample uses the following gamepad controls.</p>
  723. <table>
  724. <tr>
  725. <th>Action</th>
  726. <th>Gamepad control</th>
  727. </tr>
  728. <tr>
  729. <td>Play the cheer animation.</td>
  730. <td><b>A</b></td>
  731. </tr>
  732. <tr>
  733. <td>Play the clap animation.</td>
  734. <td><b>B</b></td>
  735. </tr>
  736. <tr>
  737. <td>Play the stand animation.</td>
  738. <td><b>X</b></td>
  739. </tr>
  740. <tr>
  741. <td>Play the wave animation.</td>
  742. <td><b>Y</b></td>
  743. </tr>
  744. <tr>
  745. <td>Switch blending on or off.</td>
  746. <td>Left shoulder button</td>
  747. </tr>
  748. <tr>
  749. <td>New random avatar..</td>
  750. <td>Right shoulder button</td>
  751. </tr>
  752. <tr>
  753. <td>Rotate the camera.</td>
  754. <td>Right thumbstick</td>
  755. </tr>
  756. <tr>
  757. <td>Zoom in.</td>
  758. <td>Right trigger</td>
  759. </tr>
  760. <tr>
  761. <td>Zoom out.</td>
  762. <td>Left trigger</td>
  763. </tr>
  764. <tr>
  765. <td>Reset the camera.</td>
  766. <td>Right thumbstick press</td>
  767. </tr>
  768. <tr>
  769. <td>Exit the sample.</td>
  770. <td><b>BACK</b></td>
  771. </tr>
  772. </table>
  773. </div>
  774. </div>
  775. <a name="ID4E2D"></a><h1 class="heading">How the Sample Works</h1><div id="ID4E2D" class="hxnx1">
  776. <p>
  777. This sample implements a new type called <code>AvatarBlendedAnimation</code>. The new type has similar properties and methods to the <b>AvatarAnimation</b> type. One difference is the <b>Play</b> method, which sets the next animation to play and represents the target animation that will be blended to.
  778. </p>
  779. <p>
  780. The <b>Update</b> method is where the blending calculations take place. The method first checks to see if there is a target animation to blend to. If not, that means the current animation is still playing and the bone transforms for the current animation should be used by themselves.
  781. </p>
  782. <p>
  783. If there is a target animation, then a blend factor from 0 to 1 is calculated. 0 means use 100 percent of the current animation's bone transforms, 1 means use 100 percent of the target animation's bone transforms, and 0.5 means use 50 percent from each. The blend factor changes from 0 to 1 over the course of the total blend time. In this sample, the total blend time is hard-coded to a quarter of a second.
  784. </p>
  785. <p>
  786. Once you know the blend factor, you check to see if it is greater than 1. If it is, it means you no longer need to blend and instead need to switch the target animation to be the current animation.
  787. </p>
  788. <p>
  789. The last part of the <b>Update</b> method loops each bone and creates a blended bone transform. Creating the new blended transform takes three steps:
  790. </p>
  791. <ul>
  792. <li>First, calculate the blended transform's rotation. The current and target rotations are used to find the final rotation by using spherical linear interpolation, or <i>slerp</i>. The <b>Quaternion.Slerp</b> method takes the current and target rotations along with the blend factor.</li>
  793. <li>Second, calculate the blended transform's translation. The current and target translations are used to find the final translation by using linear interpolation, or <i>lerp</i>. The <b>Vector3.Lerp</b> method takes the current and target translations along with the blend factor.</li>
  794. <li>Third, the final blended transform is created by multiplying the matrix created by the blended rotation and the matrix created by the blended translation. This final blended transform is then used by the <b>AvatarRenderer.Draw</b> method to display the avatar.</li>
  795. </ul>
  796. </div>
  797. <a name="ID4ENF"></a><h1 class="heading">Extending the Sample</h1><div id="ID4ENF" class="hxnx1">
  798. <p>
  799. Some ways to extend the sample include adding support for animation tracks. These would allow the developer to define any number of animations to blend together by blend weight. Another feature that can be added to the sample is the ability to wait until one animation is complete before completing the blend to another animation.
  800. </p>
  801. </div>
  802. </div><div class="footer" id="footer"><p>© 2009 Microsoft Corporation. All rights reserved.<br>Send feedback to <a href="mailto:[email protected]?subject=Documentation Feedback: Avatar Animation Blending Sample">[email protected]</a>.</p></div></div></body></html>