struct Item\n{\n IUIAnimationVariable *m_pAnimationVariableX;\n IUIAnimationVariable *m_pAnimationVariableY;\n Gdiplus::Color m_color;\n};<\/FONT><\/p>\nclass MainWindow\n{\n …<\/p>\n
\/\/ HRESULT ChangeColor(<\/STRIKE><\/FONT>\n \/\/ DOUBLE red,<\/STRIKE><\/FONT>\n \/\/ DOUBLE green,<\/STRIKE><\/FONT>\n \/\/ DOUBLE blue<\/STRIKE><\/FONT>\n \/\/ );<\/STRIKE><\/FONT>\n HRESULT ChangePos();<\/FONT><\/p>\n …\nprivate:<\/p>\n
static const int ItemCount = 100;\n static const int ItemWidth = 40;\n static const int ItemHeight = 40;\n static int XFromIndex(int index)\n {\n return (index % 10) * 50;\n }\n static int YFromIndex(int index)\n {\n return (index \/ 10) * 50;\n }<\/FONT><\/p>\n …<\/p>\n
\/\/ IUIAnimationVariable *m_pAnimationVariableRed;<\/STRIKE><\/FONT>\n \/\/ IUIAnimationVariable *m_pAnimationVariableGreen;<\/STRIKE><\/FONT>\n \/\/ IUIAnimationVariable *m_pAnimationVariableBlue;<\/STRIKE><\/FONT>\n Item m_Items[ItemCount];<\/FONT>\n};\n<\/PRE>\n\nFrom the changes in the header file,\nI think you see where this is going.\nInstead of just having one item on the screen,\nI’m going to put a hundred.\n<\/P>\n
\nHere are the changes to\nMainWindow.cpp<\/CODE>.\nFirst, we need to null out our pointers at construction\nand clean them up at destruction.\n(This sample program does not use smart pointers,\nso I won’t either.)\n<\/P>\n\nCMainWindow::CMainWindow() :\n m_hwnd(NULL),\n m_pAnimationManager(NULL),\n m_pAnimationTimer(NULL),\n m_pTransitionLibrary(NULL)\/\/ ,<\/STRIKE><\/FONT>\n \/\/ m_pAnimationVariableRed(NULL),<\/STRIKE><\/FONT>\n \/\/ m_pAnimationVariableGreen(NULL),<\/STRIKE><\/FONT>\n \/\/ m_pAnimationVariableBlue(NULL)<\/STRIKE><\/FONT>\n{\n for (int i = 0; i < ItemCount; i++)\n {\n m_Items[i].m_pAnimationVariableX = NULL;\n m_Items[i].m_pAnimationVariableY = NULL;\n }<\/FONT>\n}<\/p>\nCMainWindow::~CMainWindow()\n{\n \/\/ Animated Variables\n \/\/ SafeRelease(&m_pAnimationVariableRed);<\/STRIKE><\/FONT>\n \/\/ SafeRelease(&m_pAnimationVariableGreen);<\/STRIKE><\/FONT>\n \/\/ SafeRelease(&m_pAnimationVariableBlue);<\/STRIKE><\/FONT>\n for (int i = 0; i < ItemCount; i++)\n {\n SafeRelease(&m_Items[i].m_pAnimationVariableX);\n SafeRelease(&m_Items[i].m_pAnimationVariableY);\n }<\/FONT><\/p>\n …\n}<\/p>\n
<\/PRE>\n
\nNext we get rid of the initial animation.\n<\/P>\n
\nHRESULT CMainWindow::Initialize(\n HINSTANCE hInstance \n )\n{\n …\n \/\/ Fade in with Red<\/STRIKE><\/FONT>\n \/\/ hr = ChangeColor(COLOR_MAX, COLOR_MIN, COLOR_MIN);<\/STRIKE><\/FONT>\n …\n}\n<\/PRE>\n\nAs you might expect, the CreateAnimationVariables<\/CODE>\nmethod changed completely, since it now has to create the variables\nfor each item.\nBut the basic idea is the same:\nCreate each variable with the appropriate initial value.\n(It’s also a lot shorter!)\n<\/P>\n\nHRESULT CMainWindow::CreateAnimationVariables()\n{\n HRESULT hr = S_OK;<\/p>\n for (int i = 0; SUCCEEDED(hr) && i < ItemCount; i++)\n {\n m_Items[i].m_color = Color(\n static_cast<BYTE>(RandomFromRange(COLOR_MIN, COLOR_MAX)),\n static_cast<BYTE>(RandomFromRange(COLOR_MIN, COLOR_MAX)),\n static_cast<BYTE>(RandomFromRange(COLOR_MIN, COLOR_MAX))\n );\n hr = m_pAnimationManager->CreateAnimationVariable(\n XFromIndex(i),\n &m_Items[i].m_pAnimationVariableX\n );\n if (SUCCEEDED(hr))\n {\n hr = m_pAnimationManager->CreateAnimationVariable(\n YFromIndex(i),\n &m_Items[i].m_pAnimationVariableY\n );\n }\n }<\/FONT><\/p>\n
return hr;\n}\n<\/PRE>\n
\nThe DrawBackground<\/CODE> method is becoming\nincreasingly inaccurately-named,\nsince in addition to drawing the background, we also draw\nthe foreground!\n<\/P>\n\nHRESULT CMainWindow::DrawBackground(\n Graphics &graphics,\n const RectF &rectPaint\n )\n{\n SolidBrush brushBackground(Color(255, 255, 255));\n HRESULT<\/FONT> hr = HrFromStatus(graphics.FillRectangle(\n &brushBackground,\n rectPaint\n ));<\/p>\n for (int i = 0; SUCCEEDED(hr) && i < ItemCount; i++)\n {\n INT32 x;\n hr = m_Items[i].m_pAnimationVariableX->GetIntegerValue(\n &x\n );\n if (SUCCEEDED(hr))\n {\n INT32 y;\n hr = m_Items[i].m_pAnimationVariableY->GetIntegerValue(\n &y\n );\n if (SUCCEEDED(hr))\n {\n SolidBrush brush(m_Items[i].m_color);\n RectF rectItem(\n static_cast<REAL>(x),\n static_cast<REAL>(y),\n static_cast<REAL>(ItemWidth),\n static_cast<REAL>(ItemHeight));\n hr = HrFromStatus(graphics.FillRectangle(\n &brush,\n rectItem\n ));\n }\n }\n }<\/FONT><\/p>\n return hr;\n}\n<\/PRE>\n
\nWe change what happens when you click the left mouse button.\nInstead of changing the color, we shuffle the items randomly.\n<\/P>\n
\nHRESULT CMainWindow::OnLButtonDown()\n{\n HRESULT hr = ChangePos();<\/FONT><\/p>\n return hr; \n}\n<\/PRE>\n
\nAnd now the money function:\nShuffling the items and animating them to their new locations.\n<\/P>\n
\nHRESULT CMainWindow::ChangePos()<\/FONT>\n{\n const UI_ANIMATION_SECONDS DURATION = 0.5;\n const DOUBLE ACCELERATION_RATIO = 0.5;\n const DOUBLE DECELERATION_RATIO = 0.5;<\/p>\n \/\/ Assign final locations randomly\n int Destination[ItemCount];\n Destination[0] = 0;\n for (int i = 1; i < ItemCount; i++)\n {\n int j = rand() % (i + 1);\n Destination[i] = Destination[j];\n Destination[j] = i;\n }<\/FONT><\/p>\n \/\/ Create a storyboard<\/p>\n
IUIAnimationStoryboard *pStoryboard = NULL;\n HRESULT hr = m_pAnimationManager->CreateStoryboard(\n &pStoryboard\n );\n if (SUCCEEDED(hr))\n {\n for (int i = 0; SUCCEEDED(hr) && i < ItemCount; i++)\n {<\/FONT>\n \/\/ Create transitions for the position<\/FONT> animation variables<\/p>\n IUIAnimationTransition *pTransitionX<\/FONT>;\n hr = m_pTransitionLibrary->CreateAccelerateDecelerateTransition(\n DURATION,\n XFromIndex(Destination[i])<\/FONT>,\n ACCELERATION_RATIO,\n DECELERATION_RATIO,\n &pTransitionX<\/FONT>\n );<\/p>\n if (SUCCEEDED(hr))\n {\n IUIAnimationTransition *pTransitionY<\/FONT>;\n hr = m_pTransitionLibrary->CreateAccelerateDecelerateTransition(\n DURATION,\n YFromIndex(Destination[i])<\/FONT>,\n ACCELERATION_RATIO,\n DECELERATION_RATIO,\n &pTransitionY<\/FONT>\n );<\/p>\n \/\/ Delete “blue” transition<\/FONT><\/p>\n if (SUCCEEDED(hr))\n {\n \/\/ Add transitions to the storyboard<\/p>\n
hr = pStoryboard->AddTransition(\n m_Items[i].<\/FONT>m_pAnimationVariableX<\/FONT>,\n pTransitionX<\/FONT>\n );\n if (SUCCEEDED(hr))\n {\n hr = pStoryboard->AddTransition(\n m_Items[i].<\/FONT>m_pAnimationVariableY<\/FONT>,\n pTransitionY<\/FONT>\n );\n \/\/ Delete “blue” transition<\/FONT>\n \/\/ Move “Schedule” out of the loop<\/FONT>\n }<\/p>\n pTransitionY<\/FONT>->Release();\n }<\/p>\n pTransitionX<\/FONT>->Release();\n }\n }<\/p>\n \/\/ Scheduling code moved outside the loop<\/FONT>\n if (SUCCEEDED(hr))\n {\n \/\/ Get the current time and schedule the storyboard for play<\/p>\n UI_ANIMATION_SECONDS secondsNow;\n hr = m_pAnimationTimer->GetTime(\n &secondsNow\n );\n if (SUCCEEDED(hr))\n {\n hr = pStoryboard->Schedule(\n secondsNow\n );\n }\n }<\/p>\n
pStoryboard->Release();\n }<\/p>\n
return hr;\n}\n<\/PRE>\n
\nIt looked like a lot of code, but really wasn’t.\nThe only real change was to add the shuffling code\nand to put a loop around the code that generates\nthe transitions and adds them to the storyboard.\n<\/P>\n
\nAnd there you have it,\na program that smoothly animates 100 items\neach time you click on the window.\nFor me, the fun thing to do is to\njust click repeatedly on the window and\nwatch the items swirl around like a swarm of insects.\n<\/P><\/p>\n","protected":false},"excerpt":{"rendered":"
We saw last time a sample program that moved a circle around. Today I’ll try to build the classic demo of animating a lot of objects in a list. This isn’t the prettiest code, but I wanted to make as few changes as possible. Start with the Timer-Driven Animation, and make these changes to the […]<\/p>\n","protected":false},"author":1069,"featured_media":111744,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[25],"class_list":["post-4943","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-oldnewthing","tag-code"],"acf":[],"blog_post_summary":"
We saw last time a sample program that moved a circle around. Today I’ll try to build the classic demo of animating a lot of objects in a list. This isn’t the prettiest code, but I wanted to make as few changes as possible. Start with the Timer-Driven Animation, and make these changes to the […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/posts\/4943","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/users\/1069"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/comments?post=4943"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/posts\/4943\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/media\/111744"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/media?parent=4943"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/categories?post=4943"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/tags?post=4943"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}